popsite-ui 1.0.0

package/src/components/modules/HotelBookingModule.jsx

@@ -0,0 +1,317 @@
+import React, { useState, useEffect } from 'react';
+import { hotelBookingMockData } from '../../data/systems/hotelBooking';
+import { useToast } from '../system/Toast';
+
+export function HotelBookingModule() {
+  const [currentView, setCurrentView] = useState('search'); // search, listing, gallery, summary
+  
+  // Search State
+  const defaultCheckIn = new Date().toISOString().split('T')[0];
+  const defaultCheckOut = new Date(Date.now() + 86400000 * 3).toISOString().split('T')[0];
+  const [destination, setDestination] = useState('');
+  const [checkIn, setCheckIn] = useState(defaultCheckIn);
+  const [checkOut, setCheckOut] = useState(defaultCheckOut);
+  
+  // Filter State
+  const [activeRating, setActiveRating] = useState(0); // 0 means all
+  const [selectedAmenities, setSelectedAmenities] = useState([]);
+  
+  const [selectedHotel, setSelectedHotel] = useState(null);
+  const [nights, setNights] = useState(3);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { showToast, ToastContainer } = useToast();
+
+  useEffect(() => {
+    // Calculate nights
+    const start = new Date(checkIn);
+    const end = new Date(checkOut);
+    const diff = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
+    if (diff > 0) {
+      setNights(diff);
+    } else {
+       setNights(0);
+    }
+  }, [checkIn, checkOut]);
+
+  const withDelay = (callback, delay = 1500) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      callback();
+    }, delay);
+  };
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    if (nights <= 0) {
+      showToast('Check-out must be after Check-in', 'error');
+      return;
+    }
+    withDelay(() => {
+       setCurrentView('listing');
+    });
+  };
+
+  const toggleAmenity = (amenity) => {
+     if (selectedAmenities.includes(amenity)) {
+        setSelectedAmenities(prev => prev.filter(a => a !== amenity));
+     } else {
+        setSelectedAmenities(prev => [...prev, amenity]);
+     }
+  };
+
+  const handleBook = () => {
+    withDelay(() => {
+       showToast(`Success! Your booking for ${selectedHotel.name} is confirmed.`, 'success');
+       setCurrentView('search');
+    }, 2000);
+  };
+
+  const renderSearch = () => (
+     <div className="pk-container animate-fade-in" style={{ minHeight: '80vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+        <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
+           <h1 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>{hotelBookingMockData.platformName}</h1>
+           <p className="pk-text-body" style={{ fontSize: '1.25rem' }}>Find your perfect escape anywhere in the world.</p>
+        </div>
+
+        <div className="pk-card pk-glass" style={{ width: '100%', maxWidth: '800px', padding: '3rem' }}>
+           <form onSubmit={handleSearch} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+              <div className="pk-input-group">
+                 <label className="pk-label">Where are you going?</label>
+                 <input type="text" className="pk-input" placeholder="e.g. Tokyo, Swiss Alps, Maldives" value={destination} onChange={e => setDestination(e.target.value)} required />
+              </div>
+              <div style={{ display: 'flex', gap: '1.5rem' }}>
+                 <div className="pk-input-group" style={{ flex: 1 }}>
+                    <label className="pk-label">Check In</label>
+                    <input type="date" className="pk-input" value={checkIn} onChange={e => setCheckIn(e.target.value)} required />
+                 </div>
+                 <div className="pk-input-group" style={{ flex: 1 }}>
+                    <label className="pk-label">Check Out</label>
+                    <input type="date" className="pk-input" value={checkOut} onChange={e => setCheckOut(e.target.value)} required />
+                 </div>
+              </div>
+              {nights > 0 && <p className="pk-text-sm pk-text-center" style={{ color: 'var(--pk-primary)' }}>Duration: {nights} nights</p>}
+              <button type="submit" className="pk-btn pk-btn-primary pk-w-full" style={{ padding: '1.25rem', fontSize: '1.125rem', marginTop: '1rem' }}>
+                 Search Accommodations
+              </button>
+           </form>
+        </div>
+     </div>
+  );
+
+  const renderListing = () => {
+    const filtered = hotelBookingMockData.hotels.filter(h => {
+       const matchDest = !destination || h.destination.toLowerCase().includes(destination.toLowerCase());
+       const matchRating = activeRating === 0 || h.rating >= activeRating;
+       const matchAmenities = selectedAmenities.every(a => h.amenities.includes(a));
+       return matchDest && matchRating && matchAmenities;
+    });
+
+    return (
+       <div className="pk-container animate-fade-in" style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}>
+          {/* Filters Sidebar */}
+          <div className="pk-card pk-hidden-mobile" style={{ width: '300px', padding: '1.5rem', flexShrink: 0 }}>
+             <button className="pk-btn pk-btn-outline pk-w-full" style={{ marginBottom: '2rem' }} onClick={() => setCurrentView('search')}>← Modifiy Search</button>
+             
+             <h3 className="pk-heading-md" style={{ marginBottom: '1rem' }}>Star Rating</h3>
+             <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '2rem' }}>
+                {[5,4,3].map(stars => (
+                   <label key={stars} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
+                      <input type="radio" name="rating" checked={activeRating === stars} onChange={() => setActiveRating(stars)} style={{ accentColor: 'var(--pk-primary)' }} />
+                      <span style={{ color: '#f59e0b' }}>{'★'.repeat(stars)}</span>
+                      <span className="pk-text-muted">& up</span>
+                   </label>
+                ))}
+                <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', marginTop: '0.5rem' }}>
+                   <input type="radio" name="rating" checked={activeRating === 0} onChange={() => setActiveRating(0)} style={{ accentColor: 'var(--pk-primary)' }} />
+                   <span className="pk-text-main">Show All</span>
+                </label>
+             </div>
+
+             <h3 className="pk-heading-md" style={{ marginBottom: '1rem' }}>Amenities</h3>
+             <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                {hotelBookingMockData.amenities.map(a => (
+                   <button 
+                      key={a}
+                      className={selectedAmenities.includes(a) ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'}
+                      style={{ padding: '0.25rem 0.5rem', borderRadius: '4px', fontSize: '0.75rem' }}
+                      onClick={() => toggleAmenity(a)}
+                   >
+                      {a}
+                   </button>
+                ))}
+             </div>
+          </div>
+
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <h2 className="pk-heading-lg">{destination || 'All Destinations'}</h2>
+                <span className="pk-text-muted">{filtered.length} properties found</span>
+             </div>
+
+             {filtered.length === 0 ? (
+                <div className="pk-empty-state">
+                   <h3 className="pk-heading-md">No properties found</h3>
+                   <p className="pk-text-body">Try removing some filters.</p>
+                </div>
+             ) : (
+                filtered.map(hotel => (
+                   <div key={hotel.id} className="pk-card pk-card-interactive" style={{ display: 'flex', flexWrap: 'wrap', overflow: 'hidden' }}>
+                      <div style={{ flex: '1 1 300px', height: '250px' }}>
+                         <img src={hotel.image} alt={hotel.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                      </div>
+                      <div style={{ flex: '2 1 300px', padding: '2rem', display: 'flex', flexDirection: 'column' }}>
+                         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.5rem' }}>
+                            <div>
+                               <h3 className="pk-heading-lg">{hotel.name}</h3>
+                               <p className="pk-text-sm" style={{ color: 'var(--pk-primary)', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                                 📍 {hotel.destination}
+                               </p>
+                            </div>
+                            <span style={{ background: '#f59e0b', color: 'white', padding: '0.25rem 0.5rem', borderRadius: '4px', fontWeight: 'bold' }}>
+                               {'★'.repeat(hotel.rating)}
+                            </span>
+                         </div>
+                         <p className="pk-text-body" style={{ margin: '1rem 0', flex: 1 }}>{hotel.description}</p>
+                         
+                         <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginBottom: '1.5rem' }}>
+                            {hotel.amenities.map(a => <span key={a} className="pk-badge">{a}</span>)}
+                         </div>
+
+                         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '1px solid var(--pk-border)', paddingTop: '1rem' }}>
+                            <div>
+                               <span className="pk-heading-lg" style={{ color: 'var(--pk-primary)' }}>${hotel.pricePerNight}</span>
+                               <span className="pk-text-muted"> / night</span>
+                            </div>
+                            <button 
+                               className="pk-btn pk-btn-primary" 
+                               onClick={() => { setSelectedHotel(hotel); setCurrentView('gallery'); }}
+                            >
+                               View Deal
+                            </button>
+                         </div>
+                      </div>
+                   </div>
+                ))
+             )}
+          </div>
+       </div>
+    );
+  };
+
+  const renderGallery = () => {
+    if (!selectedHotel) return null;
+    return (
+       <div className="pk-container animate-fade-in">
+          <button className="pk-btn pk-btn-outline" style={{ marginBottom: '2rem' }} onClick={() => setCurrentView('listing')}>← Back</button>
+          
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '2rem' }}>
+             <div>
+                <h1 className="pk-heading-xl" style={{ marginBottom: '0.5rem' }}>{selectedHotel.name}</h1>
+                <p className="pk-text-body" style={{ fontSize: '1.125rem' }}>📍 {selectedHotel.destination}</p>
+             </div>
+             <button className="pk-btn pk-btn-primary" style={{ padding: '1rem 2rem', fontSize: '1.25rem' }} onClick={() => setCurrentView('summary')}>
+                Reserve • ${selectedHotel.pricePerNight * nights} Total
+             </button>
+          </div>
+
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
+             <div style={{ flex: '2 1 500px', height: '400px', borderRadius: 'var(--pk-radius-lg)', overflow: 'hidden' }}>
+                <img src={selectedHotel.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+             </div>
+             <div style={{ flex: '1 1 300px', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                {selectedHotel.gallery.map((img, i) => (
+                   <div key={i} style={{ flex: 1, height: '192px', borderRadius: 'var(--pk-radius-lg)', overflow: 'hidden' }}>
+                      <img src={img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                   </div>
+                ))}
+             </div>
+          </div>
+          
+          <div className="pk-card" style={{ marginTop: '2rem', padding: '2rem' }}>
+             <h3 className="pk-heading-md" style={{ marginBottom: '1rem' }}>About this property</h3>
+             <p className="pk-text-body">{selectedHotel.description}</p>
+             <h4 className="pk-label" style={{ marginTop: '2rem', marginBottom: '1rem' }}>Popular Amenities</h4>
+             <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+                {selectedHotel.amenities.map(a => <span key={a} className="pk-badge" style={{ fontSize: '1rem', padding: '0.5rem 1rem' }}>✓ {a}</span>)}
+             </div>
+          </div>
+       </div>
+    );
+  };
+
+  const renderSummary = () => {
+     if (!selectedHotel) return null;
+     const total = selectedHotel.pricePerNight * nights;
+
+     return (
+        <div className="pk-container animate-fade-in" style={{ display: 'flex', justifyContent: 'center' }}>
+           <div className="pk-card" style={{ width: '100%', maxWidth: '600px', padding: '3rem' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
+                 <h2 className="pk-heading-lg">Review Booking</h2>
+                 <button className="pk-btn pk-btn-outline" style={{ border: 'none' }} onClick={() => setCurrentView('gallery')}>Cancel</button>
+              </div>
+
+              <div style={{ display: 'flex', gap: '1.5rem', marginBottom: '2rem', background: 'var(--pk-bg-main)', padding: '1rem', borderRadius: 'var(--pk-radius-md)' }}>
+                 <img src={selectedHotel.image} alt="" style={{ width: '80px', height: '80px', borderRadius: 'var(--pk-radius-sm)', objectFit: 'cover' }} />
+                 <div>
+                    <h3 className="pk-heading-md">{selectedHotel.name}</h3>
+                    <p className="pk-text-sm" style={{ color: 'var(--pk-primary)' }}>{selectedHotel.destination}</p>
+                 </div>
+              </div>
+
+              <div style={{ display: 'flex', gap: '1rem', marginBottom: '2rem' }}>
+                 <div className="pk-card" style={{ flex: 1, padding: '1rem', textAlign: 'center' }}>
+                    <p className="pk-label pk-text-muted">Check-In</p>
+                    <p className="pk-heading-sm">{checkIn}</p>
+                 </div>
+                 <div className="pk-card" style={{ flex: 1, padding: '1rem', textAlign: 'center' }}>
+                    <p className="pk-label pk-text-muted">Check-Out</p>
+                    <p className="pk-heading-sm">{checkOut}</p>
+                 </div>
+              </div>
+
+              <div style={{ borderTop: '1px solid var(--pk-border)', borderBottom: '1px solid var(--pk-border)', padding: '1.5rem 0', marginBottom: '2rem' }}>
+                 <h3 className="pk-heading-md" style={{ marginBottom: '1rem' }}>Price Details</h3>
+                 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+                    <span className="pk-text-body">${selectedHotel.pricePerNight} x {nights} nights</span>
+                    <span>${total}</span>
+                 </div>
+                 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+                    <span className="pk-text-body">Taxes and fees</span>
+                    <span>${(total * 0.1).toFixed(0)}</span>
+                 </div>
+              </div>
+
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
+                 <span className="pk-heading-lg">Total (USD)</span>
+                 <span className="pk-heading-xl" style={{ color: 'var(--pk-primary)' }}>${(total * 1.1).toFixed(0)}</span>
+              </div>
+
+              <button className="pk-btn pk-btn-primary pk-w-full" style={{ padding: '1.25rem', fontSize: '1.125rem' }} onClick={handleBook}>
+                 Confirm & Pay
+              </button>
+           </div>
+        </div>
+     );
+  };
+
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh', backgroundColor: 'var(--pk-bg-main)' }}>
+       {isLoading && (
+         <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(255,255,255,0.8)', zIndex: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
+           <div className="pk-skeleton" style={{ width: '80px', height: '80px', borderRadius: '50%', marginBottom: '1rem' }}></div>
+           <h3 className="pk-heading-md">Searching Global Availability...</h3>
+         </div>
+       )}
+
+       {currentView === 'search' && renderSearch()}
+       {currentView === 'listing' && renderListing()}
+       {currentView === 'gallery' && renderGallery()}
+       {currentView === 'summary' && renderSummary()}
+       
+       <ToastContainer />
+    </div>
+  );
+}

package/src/components/modules/InvoiceBillingModule.jsx

@@ -0,0 +1,302 @@
+import React, { useState, useEffect } from 'react';
+import { invoiceBillingMockData } from '../../data/systems/invoiceBilling';
+import { useToast } from '../system/Toast';
+
+export function InvoiceBillingModule() {
+  const [currentView, setCurrentView] = useState('dashboard'); // dashboard, creator, clients
+  const [invoices, setInvoices] = useState(invoiceBillingMockData.recentInvoices);
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  // Invoice Creator State
+  const [selectedClient, setSelectedClient] = useState('');
+  const [taxRate, setTaxRate] = useState(invoiceBillingMockData.companyInfo.taxRate);
+  const [lineItems, setLineItems] = useState([
+    { id: 1, description: 'Website Redesign', qty: 1, rate: 2500 },
+    { id: 2, description: 'Hosting (Annual)', qty: 1, rate: 150 }
+  ]);
+  
+  const { showToast, ToastContainer } = useToast();
+
+  useEffect(() => {
+    const saved = localStorage.getItem('popsite_invoices');
+    if (saved) {
+      try { setInvoices(JSON.parse(saved)); } catch(e){}
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('popsite_invoices', JSON.stringify(invoices));
+  }, [invoices]);
+
+  // Math calculated dynamically
+  const subTotal = lineItems.reduce((acc, item) => acc + (item.qty * item.rate), 0);
+  const taxAmount = subTotal * (taxRate / 100);
+  const grandTotal = subTotal + taxAmount;
+
+  const handleAddItem = () => {
+    setLineItems([...lineItems, { id: Date.now(), description: '', qty: 1, rate: 0 }]);
+  };
+
+  const handleRemoveItem = (id) => {
+    setLineItems(lineItems.filter(item => item.id !== id));
+  };
+
+  const handleChangeItem = (id, field, value) => {
+    setLineItems(lineItems.map(item => 
+      item.id === id ? { ...item, [field]: value } : item
+    ));
+  };
+
+  const handleSaveInvoice = () => {
+    if (!selectedClient) {
+      showToast('Please select a client', 'error');
+      return;
+    }
+    const newInvoice = {
+      id: `INV-${new Date().getFullYear()}-${Math.floor(Math.random()*1000)}`,
+      client: invoiceBillingMockData.clients.find(c => c.id === selectedClient)?.name || 'Unknown',
+      date: new Date().toISOString().split('T')[0],
+      amount: grandTotal,
+      status: 'Pending'
+    };
+    setInvoices([newInvoice, ...invoices]);
+    showToast(`Invoice ${newInvoice.id} generated!`, 'success');
+    setCurrentView('dashboard');
+  };
+
+  const renderNav = () => (
+    <div className="pk-card no-print" style={{ marginBottom: '2rem', padding: '1rem', display: 'flex', gap: '1rem', overflowX: 'auto' }}>
+      <button className={currentView === 'dashboard' ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'} onClick={() => setCurrentView('dashboard')}>Overview</button>
+      <button className={currentView === 'creator' ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'} onClick={() => setCurrentView('creator')}>Create Invoice</button>
+      <button className={currentView === 'clients' ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'} onClick={() => setCurrentView('clients')}>Client Directory</button>
+    </div>
+  );
+
+  const renderDashboard = () => (
+    <div className="animate-fade-in no-print">
+       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
+          <h2 className="pk-heading-lg">Recent Invoices</h2>
+          <button className="pk-btn pk-btn-primary" onClick={() => setCurrentView('creator')}>+ New Invoice</button>
+       </div>
+       
+       <div className="pk-card" style={{ overflowX: 'auto' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
+             <thead>
+                <tr style={{ background: 'var(--pk-bg-main)', borderBottom: '1px solid var(--pk-border)' }}>
+                   <th style={{ padding: '1rem 1.5rem', color: 'var(--pk-text-muted)' }}>Invoice ID</th>
+                   <th style={{ padding: '1rem 1.5rem', color: 'var(--pk-text-muted)' }}>Client</th>
+                   <th style={{ padding: '1rem 1.5rem', color: 'var(--pk-text-muted)' }}>Date</th>
+                   <th style={{ padding: '1rem 1.5rem', color: 'var(--pk-text-muted)' }}>Amount</th>
+                   <th style={{ padding: '1rem 1.5rem', color: 'var(--pk-text-muted)' }}>Status</th>
+                </tr>
+             </thead>
+             <tbody>
+                {invoices.map((inv, i) => (
+                   <tr key={i} style={{ borderBottom: '1px solid var(--pk-border)' }}>
+                      <td style={{ padding: '1rem 1.5rem', fontWeight: 600 }}>{inv.id}</td>
+                      <td style={{ padding: '1rem 1.5rem' }}>{inv.client}</td>
+                      <td style={{ padding: '1rem 1.5rem' }}>{inv.date}</td>
+                      <td style={{ padding: '1rem 1.5rem', fontWeight: 'bold' }}>${inv.amount.toLocaleString(undefined, {minimumFractionDigits: 2})}</td>
+                      <td style={{ padding: '1rem 1.5rem' }}>
+                        <span className="pk-badge" style={{ 
+                          background: inv.status === 'Paid' ? 'var(--pk-success)' : inv.status === 'Overdue' ? 'var(--pk-danger)' : 'var(--pk-warning)',
+                          color: 'white' 
+                        }}>
+                          {inv.status}
+                        </span>
+                      </td>
+                   </tr>
+                ))}
+             </tbody>
+          </table>
+       </div>
+    </div>
+  );
+
+  const renderClients = () => {
+    const filtered = invoiceBillingMockData.clients.filter(c => c.name.toLowerCase().includes(searchQuery.toLowerCase()));
+    
+    return (
+      <div className="animate-fade-in no-print">
+         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
+            <h2 className="pk-heading-lg">Client Directory</h2>
+            <input 
+               type="text" 
+               className="pk-input" 
+               placeholder="Search clients..." 
+               value={searchQuery}
+               onChange={e => setSearchQuery(e.target.value)}
+            />
+         </div>
+         
+         <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))' }}>
+            {filtered.map(client => (
+               <div key={client.id} className="pk-card" style={{ padding: '1.5rem' }}>
+                  <h3 className="pk-heading-md" style={{ marginBottom: '1rem' }}>{client.name}</h3>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                     <a href={`mailto:${client.email}`} className="pk-text-body" style={{ color: 'var(--pk-primary)', textDecoration: 'none' }}>✉️ {client.email}</a>
+                     <a href={`tel:${client.phone}`} className="pk-text-body" style={{ color: 'var(--pk-text-main)', textDecoration: 'none' }}>📞 {client.phone}</a>
+                  </div>
+                  <button 
+                    className="pk-btn pk-btn-outline" 
+                    style={{ width: '100%', marginTop: '1.5rem' }}
+                    onClick={() => { setSelectedClient(client.id); setCurrentView('creator'); }}
+                  >
+                    Invoice Client
+                  </button>
+               </div>
+            ))}
+         </div>
+      </div>
+    );
+  };
+
+  const renderCreator = () => (
+    <div className="animate-fade-in print-container" style={{ background: 'white', padding: '2rem', borderRadius: 'var(--pk-radius-lg)', boxShadow: 'var(--pk-shadow-lg)' }}>
+       {/* Print Setup */}
+       <style>{`
+          @media print {
+            body * { visibility: hidden; }
+            .print-container, .print-container * { visibility: visible; }
+            .print-container { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; padding: 0; }
+            .no-print { display: none !important; }
+            .pk-container { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
+            @page { margin: 1cm; }
+          }
+       `}</style>
+       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '3rem', borderBottom: '2px solid var(--pk-border)', paddingBottom: '2rem' }}>
+          <div>
+             <h1 className="pk-heading-xl" style={{ color: 'var(--pk-primary)', marginBottom: '0.5rem' }}>INVOICE</h1>
+             <p className="pk-text-body">ID: INV-DRAFT</p>
+             <p className="pk-text-body">Date: {new Date().toISOString().split('T')[0]}</p>
+          </div>
+          <div style={{ textAlign: 'right' }}>
+             <h3 className="pk-heading-md">{invoiceBillingMockData.companyInfo.name}</h3>
+             <p className="pk-text-body" style={{ whiteSpace: 'pre-line' }}>{invoiceBillingMockData.companyInfo.address}</p>
+             <p className="pk-text-body">{invoiceBillingMockData.companyInfo.email}</p>
+          </div>
+       </div>
+
+       <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '3rem' }}>
+          <div style={{ flex: 1 }}>
+             <h4 className="pk-label" style={{ marginBottom: '0.5rem', color: 'var(--pk-text-muted)' }}>Bill To:</h4>
+             <select 
+                className="pk-input no-print" 
+                value={selectedClient} 
+                onChange={e => setSelectedClient(e.target.value)} 
+                style={{ width: '100%', maxWidth: '300px', marginBottom: '0.5rem' }}
+             >
+                <option value="">-- Select Client --</option>
+                {invoiceBillingMockData.clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+             </select>
+             {/* Print friendly view */}
+             <div style={{ display: 'none', display: selectedClient ? 'block' : 'none' }}>
+               <h3 className="pk-heading-md">{invoiceBillingMockData.clients.find(c => c.id === selectedClient)?.name}</h3>
+               <p className="pk-text-body">{invoiceBillingMockData.clients.find(c => c.id === selectedClient)?.email}</p>
+             </div>
+             {!selectedClient && <div style={{ display: 'none' }}>_____________</div>}
+          </div>
+       </div>
+
+       <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: '2rem' }}>
+          <thead>
+             <tr style={{ background: 'var(--pk-primary-light)', color: 'var(--pk-primary)' }}>
+                <th style={{ padding: '1rem', textAlign: 'left' }}>Description</th>
+                <th style={{ padding: '1rem', textAlign: 'center', width: '100px' }}>Qty</th>
+                <th style={{ padding: '1rem', textAlign: 'right', width: '150px' }}>Rate</th>
+                <th style={{ padding: '1rem', textAlign: 'right', width: '150px' }}>Total</th>
+                <th className="no-print" style={{ width: '50px' }}></th>
+             </tr>
+          </thead>
+          <tbody>
+             {lineItems.map((item, idx) => (
+                <tr key={item.id} style={{ borderBottom: '1px solid var(--pk-border)' }}>
+                   <td style={{ padding: '1rem' }}>
+                      <input 
+                        type="text" 
+                        className="pk-input" 
+                        style={{ width: '100%', border: 'none', background: 'transparent' }} 
+                        value={item.description} 
+                        onChange={e => handleChangeItem(item.id, 'description', e.target.value)} 
+                        placeholder="Item description"
+                      />
+                   </td>
+                   <td style={{ padding: '1rem', textAlign: 'center' }}>
+                      <input 
+                        type="number" 
+                        className="pk-input" 
+                        style={{ width: '60px', textAlign: 'center' }} 
+                        value={item.qty} 
+                        onChange={e => handleChangeItem(item.id, 'qty', parseFloat(e.target.value) || 0)} 
+                      />
+                   </td>
+                   <td style={{ padding: '1rem', textAlign: 'right' }}>
+                      <input 
+                        type="number" 
+                        className="pk-input" 
+                        style={{ width: '100px', textAlign: 'right' }} 
+                        value={item.rate} 
+                        onChange={e => handleChangeItem(item.id, 'rate', parseFloat(e.target.value) || 0)} 
+                      />
+                   </td>
+                   <td style={{ padding: '1rem', textAlign: 'right', fontWeight: 600 }}>
+                      ${(item.qty * item.rate).toFixed(2)}
+                   </td>
+                   <td className="no-print" style={{ padding: '1rem', textAlign: 'center' }}>
+                      <button className="pk-btn pk-btn-outline" style={{ padding: '0.25rem 0.5rem', color: 'var(--pk-danger)', border: 'none' }} onClick={() => handleRemoveItem(item.id)}>×</button>
+                   </td>
+                </tr>
+             ))}
+          </tbody>
+       </table>
+       
+       <button className="pk-btn pk-btn-outline no-print" onClick={handleAddItem} style={{ marginBottom: '2rem' }}>+ Add Line Item</button>
+
+       <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <div style={{ width: '300px' }}>
+             <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
+                <span className="pk-text-body">Subtotal</span>
+                <span>${subTotal.toFixed(2)}</span>
+             </div>
+             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+                <span className="pk-text-body">Tax Rate (%)</span>
+                <input type="number" className="pk-input no-print" style={{ width: '80px', textAlign: 'right' }} value={taxRate} onChange={e => setTaxRate(parseFloat(e.target.value) || 0)} />
+                <span style={{ display: 'none' }}>{taxRate}%</span>
+             </div>
+             <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem', color: 'var(--pk-text-muted)' }}>
+                <span className="pk-text-body">Tax Amount</span>
+                <span>${taxAmount.toFixed(2)}</span>
+             </div>
+             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '1rem', borderTop: '2px solid var(--pk-border)', paddingTop: '1rem' }}>
+                <span className="pk-heading-md">Total Due</span>
+                <span className="pk-heading-lg" style={{ color: 'var(--pk-primary)' }}>${grandTotal.toFixed(2)}</span>
+             </div>
+          </div>
+       </div>
+
+       <div className="no-print" style={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem', marginTop: '3rem' }}>
+          <button className="pk-btn pk-btn-secondary" onClick={() => window.print()}>🖨️ Print to PDF</button>
+          <button className="pk-btn pk-btn-primary" onClick={handleSaveInvoice}>✅ Save Invoice</button>
+       </div>
+    </div>
+  );
+
+  return (
+    <div className="pk-container" style={{ minHeight: '100vh' }}>
+       <div className="no-print" style={{ marginBottom: '2rem' }}>
+          <h1 className="pk-heading-xl">Billing & Invoicing</h1>
+          <p className="pk-text-body">Manage clients and generate dynamic invoices.</p>
+       </div>
+
+       {renderNav()}
+
+       <div style={{ position: 'relative' }}>
+         {currentView === 'dashboard' && renderDashboard()}
+         {currentView === 'clients' && renderClients()}
+         {currentView === 'creator' && renderCreator()}
+       </div>
+
+       <ToastContainer />
+    </div>
+  );
+}