popsite-ui 1.0.0

package/src/components/modules/FoodOrderingModule.jsx

@@ -0,0 +1,316 @@
+import React, { useState, useEffect } from 'react';
+import { foodOrderingMockData } from '../../data/systems/foodOrdering';
+import { useToast } from '../system/Toast';
+
+export function FoodOrderingModule() {
+  const [currentView, setCurrentView] = useState('directory'); // directory, menu, tracker
+  const [selectedRestaurant, setSelectedRestaurant] = useState(null);
+  const [activeCategory, setActiveCategory] = useState('All');
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  const [cart, setCart] = useState([]);
+  const [orderState, setOrderState] = useState(0); // 0: Preparing, 1: Out for Delivery, 2: Arrived
+  const [activeOrder, setActiveOrder] = useState(null);
+  
+  const { showToast, ToastContainer } = useToast();
+
+  useEffect(() => {
+    const savedCart = localStorage.getItem('popsite_food_cart');
+    if (savedCart) {
+      try { setCart(JSON.parse(savedCart)); } catch (e) {}
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('popsite_food_cart', JSON.stringify(cart));
+  }, [cart]);
+
+  const handleAddToCart = (item) => {
+    const existing = cart.find(c => c.item.id === item.id);
+    if (existing) {
+      setCart(cart.map(c => c.item.id === item.id ? { ...c, qty: c.qty + 1 } : c));
+    } else {
+      setCart([...cart, { item, qty: 1 }]);
+    }
+    showToast(`Added ${item.name} to cart`, 'success');
+  };
+
+  const handleUpdateQty = (itemId, delta) => {
+    setCart(cart.map(c => {
+      if (c.item.id === itemId) return { ...c, qty: Math.max(0, c.qty + delta) };
+      return c;
+    }).filter(c => c.qty > 0));
+  };
+
+  const handleCheckout = () => {
+    if (cart.length === 0) return;
+    const total = cart.reduce((acc, c) => acc + (c.item.price * c.qty), 0) + selectedRestaurant.deliveryFee;
+    
+    setActiveOrder({
+       id: `ORD-${Math.floor(Math.random()*10000)}`,
+       restaurant: selectedRestaurant,
+       items: [...cart],
+       total
+    });
+    
+    setCart([]);
+    setOrderState(0);
+    setCurrentView('tracker');
+    showToast('Order confirmed!', 'success');
+
+    // Simulate delivery progress sequentially using setTimeout
+    setTimeout(() => {
+       setOrderState(1);
+       showToast('Your order is out for delivery!', 'info');
+       
+       setTimeout(() => {
+          setOrderState(2);
+          showToast('Your order has arrived. Enjoy!', 'success');
+       }, 5000);
+       
+    }, 4000);
+  };
+
+  const renderCartSidebar = () => {
+    if (!selectedRestaurant) return null;
+    
+    const subtotal = cart.reduce((acc, c) => acc + (c.item.price * c.qty), 0);
+    const total = subtotal + selectedRestaurant.deliveryFee;
+
+    return (
+       <div className="pk-card" style={{ position: 'sticky', top: '20px', display: 'flex', flexDirection: 'column', height: 'calc(100vh - 40px)' }}>
+          <div className="pk-card-header" style={{ paddingBottom: '1rem', borderBottom: '1px solid var(--pk-border)' }}>
+             <h3 className="pk-heading-md">Your Order</h3>
+             <p className="pk-text-sm">{selectedRestaurant.name}</p>
+          </div>
+          <div className="pk-card-body" style={{ flex: 1, overflowY: 'auto', padding: '1rem' }}>
+             {cart.length === 0 ? (
+                <div className="pk-empty-state" style={{ padding: '2rem 1rem', border: 'none' }}>
+                   <div style={{ fontSize: '3rem', opacity: 0.5, marginBottom: '1rem' }}>🛒</div>
+                   <p className="pk-text-body">Cart is empty.</p>
+                </div>
+             ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                   {cart.map((c, i) => (
+                      <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                         <div style={{ flex: 1 }}>
+                            <p className="pk-label" style={{ marginBottom: '0.25rem' }}>{c.item.name}</p>
+                            <p className="pk-text-sm">${(c.item.price * c.qty).toFixed(2)}</p>
+                         </div>
+                         <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', background: 'var(--pk-bg-main)', borderRadius: 'var(--pk-radius-full)', padding: '0.25rem' }}>
+                            <button className="pk-btn pk-btn-outline" style={{ borderRadius: '50%', width: 28, height: 28, padding: 0, display: 'flex', alignItems: 'center', justifyItems: 'center', justifyContent: 'center' }} onClick={() => handleUpdateQty(c.item.id, -1)}>-</button>
+                            <span style={{ width: '20px', textAlign: 'center', fontWeight: 'bold' }}>{c.qty}</span>
+                            <button className="pk-btn pk-btn-outline" style={{ borderRadius: '50%', width: 28, height: 28, padding: 0, display: 'flex', alignItems: 'center', justifyItems: 'center', justifyContent: 'center' }} onClick={() => handleUpdateQty(c.item.id, 1)}>+</button>
+                         </div>
+                      </div>
+                   ))}
+                </div>
+             )}
+          </div>
+          <div className="pk-card-footer" style={{ padding: '1.5rem', background: 'var(--pk-bg-main)' }}>
+             <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+                <span className="pk-text-body">Subtotal</span>
+                <span>${subtotal.toFixed(2)}</span>
+             </div>
+             <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
+                <span className="pk-text-body">Delivery Fee</span>
+                <span>${selectedRestaurant.deliveryFee.toFixed(2)}</span>
+             </div>
+             <button 
+                className="pk-btn pk-btn-primary" 
+                style={{ width: '100%', padding: '1rem', fontSize: '1.125rem' }}
+                disabled={cart.length === 0}
+                onClick={handleCheckout}
+             >
+                Checkout • ${total.toFixed(2)}
+             </button>
+          </div>
+       </div>
+    );
+  };
+
+  const renderDirectory = () => {
+    const filtered = foodOrderingMockData.restaurants.filter(r => {
+       const matchCat = activeCategory === 'All' || r.category === activeCategory;
+       const matchSearch = r.name.toLowerCase().includes(searchQuery.toLowerCase());
+       return matchCat && matchSearch;
+    });
+
+    return (
+       <div className="pk-container animate-fade-in">
+          <div style={{ marginBottom: '2rem' }}>
+             <h1 className="pk-heading-xl" style={{ marginBottom: '0.5rem' }}>{foodOrderingMockData.platformName}</h1>
+             <p className="pk-text-body">Cravings delivered to your door.</p>
+          </div>
+
+          <div className="pk-card pk-glass" style={{ padding: '1.5rem', marginBottom: '2rem', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+             <input 
+                type="text" 
+                className="pk-input" 
+                placeholder="Search restaurants..." 
+                style={{ width: '100%', maxWidth: '500px' }}
+                value={searchQuery}
+                onChange={e => setSearchQuery(e.target.value)}
+             />
+             <div style={{ display: 'flex', gap: '0.75rem', overflowX: 'auto', paddingBottom: '0.5rem' }}>
+                {foodOrderingMockData.categories.map(cat => (
+                   <button 
+                      key={cat}
+                      className={activeCategory === cat ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'}
+                      style={{ borderRadius: 'var(--pk-radius-full)', padding: '0.5rem 1.25rem', whiteSpace: 'nowrap' }}
+                      onClick={() => setActiveCategory(cat)}
+                   >
+                      {cat}
+                   </button>
+                ))}
+             </div>
+          </div>
+
+          <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))' }}>
+             {filtered.map(restaurant => (
+                <div key={restaurant.id} className="pk-card pk-card-interactive" style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column' }} onClick={() => { setSelectedRestaurant(restaurant); setCurrentView('menu'); }}>
+                   <div style={{ height: '200px', width: '100%' }}>
+                      <img src={restaurant.image} alt={restaurant.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} onError={(e) => {e.target.style.display='none'; e.target.nextSibling.style.display='flex';}} />
+                      <div style={{ display: 'none', width: '100%', height: '100%', background: 'var(--pk-secondary)', color: 'white', alignItems: 'center', justifyContent: 'center', fontSize: '2rem' }}>{restaurant.name[0]}</div>
+                   </div>
+                   <div className="pk-card-body" style={{ flex: 1 }}>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.5rem' }}>
+                         <h3 className="pk-heading-md">{restaurant.name}</h3>
+                         <span style={{ background: '#f59e0b', color: 'white', padding: '0.25rem 0.5rem', borderRadius: 'var(--pk-radius-sm)', fontWeight: 'bold', fontSize: '0.875rem' }}>★ {restaurant.rating}</span>
+                      </div>
+                      <p className="pk-text-sm" style={{ marginBottom: '1rem' }}>{restaurant.category} • {restaurant.deliveryTime}</p>
+                      <span className="pk-badge" style={{ background: 'var(--pk-primary-light)', color: 'var(--pk-primary)' }}>Delivery: ${restaurant.deliveryFee}</span>
+                   </div>
+                </div>
+             ))}
+          </div>
+       </div>
+    );
+  };
+
+  const renderMenu = () => (
+     <div className="pk-container animate-fade-in" style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+           <button className="pk-btn pk-btn-outline" style={{ alignSelf: 'flex-start' }} onClick={() => setCurrentView('directory')}>← Back</button>
+           
+           <div style={{ height: '300px', width: '100%', borderRadius: 'var(--pk-radius-lg)', overflow: 'hidden', position: 'relative' }}>
+              <img src={selectedRestaurant.image} alt={selectedRestaurant.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+              <div style={{ position: 'absolute', bottom: 0, left: 0, width: '100%', padding: '2rem', background: 'linear-gradient(transparent, rgba(0,0,0,0.8))', color: 'white' }}>
+                 <h1 className="pk-heading-xl" style={{ marginBottom: '0.5rem' }}>{selectedRestaurant.name}</h1>
+                 <p style={{ fontSize: '1.125rem', opacity: 0.9 }}>{selectedRestaurant.category} • {selectedRestaurant.rating} Rating</p>
+              </div>
+           </div>
+
+           <div>
+              <h2 className="pk-heading-lg" style={{ marginBottom: '1.5rem' }}>Menu</h2>
+              <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))' }}>
+                 {selectedRestaurant.menu.map(item => (
+                    <div key={item.id} className="pk-card" style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column' }}>
+                       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.5rem' }}>
+                          <h3 className="pk-heading-md">{item.name}</h3>
+                          <span className="pk-heading-md" style={{ color: 'var(--pk-primary)' }}>${item.price.toFixed(2)}</span>
+                       </div>
+                       <p className="pk-text-body" style={{ marginBottom: '1rem', flex: 1 }}>{item.description}</p>
+                       <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginBottom: '1.5rem' }}>
+                          {item.dietary.map(tag => (
+                             <span key={tag} className="pk-badge" style={{ background: 'rgba(16, 185, 129, 0.1)', color: 'var(--pk-success)' }}>{tag}</span>
+                          ))}
+                       </div>
+                       <button className="pk-btn pk-btn-outline" style={{ marginTop: 'auto' }} onClick={() => handleAddToCart(item)}>
+                          + Add to Cart
+                       </button>
+                    </div>
+                 ))}
+              </div>
+           </div>
+        </div>
+
+        {/* Sidebar Space */}
+        <div style={{ width: '350px', flexShrink: 0 }} className="pk-hidden-mobile">
+           {renderCartSidebar()}
+        </div>
+     </div>
+  );
+
+  const renderTracker = () => {
+     if (!activeOrder) return null;
+     
+     const progressPercent = orderState === 0 ? 33 : orderState === 1 ? 66 : 100;
+     const steps = ['Preparing', 'Out for Delivery', 'Arrived'];
+
+     return (
+        <div className="pk-container animate-fade-in" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '80vh' }}>
+           <div className="pk-card" style={{ width: '100%', maxWidth: '600px', overflow: 'hidden' }}>
+              {/* Map Placeholder */}
+              <div style={{ height: '250px', background: 'linear-gradient(135deg, #e2e8f0, #cbd5e1)', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                 <div style={{ position: 'absolute', width: '200%', height: '200%', background: 'radial-gradient(circle, transparent 20%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.4) 80%, transparent 80%, transparent) 0 0, radial-gradient(circle, transparent 20%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.4) 80%, transparent 80%, transparent) 50px 50px', backgroundSize: '100px 100px', opacity: 0.5 }}></div>
+                 <div style={{ position: 'relative', fontSize: '4rem', filter: 'drop-shadow(0 10px 10px rgba(0,0,0,0.2))', animation: orderState === 1 ? 'bounce 2s infinite' : 'none' }}>
+                    {orderState === 0 ? '🧑‍🍳' : orderState === 1 ? '🛵' : '🎉'}
+                 </div>
+              </div>
+
+              <div className="pk-card-body" style={{ padding: '3rem 2rem' }}>
+                 <h2 className="pk-heading-xl" style={{ textAlign: 'center', marginBottom: '1rem' }}>Order {steps[orderState]}</h2>
+                 <p className="pk-text-body" style={{ textAlign: 'center', marginBottom: '3rem' }}>{activeOrder.id} • {activeOrder.restaurant.name}</p>
+
+                 {/* Progress Bar UI */}
+                 <div style={{ position: 'relative', marginBottom: '3rem' }}>
+                    <div style={{ position: 'absolute', top: '50%', left: 0, width: '100%', height: '4px', background: 'var(--pk-bg-main)', transform: 'translateY(-50%)', zIndex: 0 }}></div>
+                    <div style={{ position: 'absolute', top: '50%', left: 0, width: `${progressPercent}%`, height: '4px', background: 'var(--pk-primary)', transform: 'translateY(-50%)', zIndex: 1, transition: 'width 1s cubic-bezier(0.4, 0, 0.2, 1)' }}></div>
+                    
+                    <div style={{ display: 'flex', justifyContent: 'space-between', position: 'relative', zIndex: 2 }}>
+                       {[0, 1, 2].map((step) => (
+                          <div key={step} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem', width: '33.33%' }}>
+                             <div style={{ 
+                                width: '24px', height: '24px', borderRadius: '50%', 
+                                background: step <= orderState ? 'var(--pk-primary)' : 'var(--pk-bg-main)',
+                                border: `4px solid ${step <= orderState ? 'var(--pk-primary-light)' : 'var(--pk-border)'}`,
+                                transition: 'all 0.5s'
+                             }}></div>
+                             <span className="pk-text-sm" style={{ fontWeight: step === orderState ? 600 : 400, color: step <= orderState ? 'var(--pk-text-main)' : 'var(--pk-text-muted)' }}>{steps[step]}</span>
+                          </div>
+                       ))}
+                    </div>
+                 </div>
+
+                 <div style={{ background: 'var(--pk-bg-main)', padding: '1.5rem', borderRadius: 'var(--pk-radius-md)' }}>
+                    <h4 className="pk-label" style={{ marginBottom: '1rem' }}>Order Summary</h4>
+                    {activeOrder.items.map((c, i) => (
+                       <div key={i} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+                          <span className="pk-text-sm">{c.qty}x {c.item.name}</span>
+                          <span className="pk-text-sm">${(c.item.price * c.qty).toFixed(2)}</span>
+                       </div>
+                    ))}
+                    <div style={{ borderTop: '1px solid var(--pk-border)', marginTop: '1rem', paddingTop: '1rem', display: 'flex', justifyContent: 'space-between' }}>
+                       <span className="pk-heading-md">Total</span>
+                       <span className="pk-heading-md">${activeOrder.total.toFixed(2)}</span>
+                    </div>
+                 </div>
+              </div>
+
+              {orderState === 2 && (
+                 <div className="pk-card-footer" style={{ display: 'flex', justifyContent: 'center' }}>
+                    <button className="pk-btn pk-btn-primary" onClick={() => { setActiveOrder(null); setCurrentView('directory'); }}>
+                       Back to Restaurants
+                    </button>
+                 </div>
+              )}
+           </div>
+
+           <style>{`
+             @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
+           `}</style>
+        </div>
+     );
+  };
+
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh', backgroundColor: 'var(--pk-bg-main)' }}>
+       {currentView === 'directory' && renderDirectory()}
+       {currentView === 'menu' && renderMenu()}
+       {currentView === 'tracker' && renderTracker()}
+       
+       <ToastContainer />
+    </div>
+  );
+}

package/src/components/modules/HospitalAppointmentModule.jsx

@@ -0,0 +1,267 @@
+import React, { useState, useEffect } from 'react';
+import { hospitalAppointmentMockData } from '../../data/systems/hospitalAppointment';
+import { useToast } from '../system/Toast';
+
+export function HospitalAppointmentModule() {
+  const [currentView, setCurrentView] = useState('directory'); // directory, booking, history
+  const [doctors, setDoctors] = useState(hospitalAppointmentMockData.doctors);
+  const [history, setHistory] = useState(hospitalAppointmentMockData.patientHistory);
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeSpecialty, setActiveSpecialty] = useState('All');
+  
+  const [selectedDoctor, setSelectedDoctor] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { showToast, ToastContainer } = useToast();
+
+  useEffect(() => {
+    const savedDocs = localStorage.getItem('popsite_hosp_docs');
+    const savedHist = localStorage.getItem('popsite_hosp_hist');
+    if (savedDocs) try { setDoctors(JSON.parse(savedDocs)); } catch(e){}
+    if (savedHist) try { setHistory(JSON.parse(savedHist)); } catch(e){}
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('popsite_hosp_docs', JSON.stringify(doctors));
+    localStorage.setItem('popsite_hosp_hist', JSON.stringify(history));
+  }, [doctors, history]);
+
+  const withDelay = (callback, delay = 1000) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      callback();
+    }, delay);
+  };
+
+  const handleBookSlot = (timeSlot) => {
+    withDelay(() => {
+      // Create appointment
+      const newApt = {
+        id: `APT-${Math.floor(Math.random()*10000)}`,
+        doctorName: selectedDoctor.name,
+        doctorId: selectedDoctor.id,
+        date: selectedDate,
+        time: timeSlot,
+        status: 'Scheduled',
+        diagnosis: '--'
+      };
+      
+      setHistory(prev => [newApt, ...prev]);
+
+      // Remove the slot from doctor's availability (simulating DB atomic lock)
+      setDoctors(prev => prev.map(doc => {
+        if (doc.id === selectedDoctor.id) {
+          return { ...doc, availableTimeSlots: doc.availableTimeSlots.filter(t => t !== timeSlot) };
+        }
+        return doc;
+      }));
+
+      showToast(`Appointment confirmed for ${timeSlot}`, 'success');
+      setCurrentView('history');
+    }, 1500);
+  };
+
+  const handleCancelAppointment = (apt) => {
+    withDelay(() => {
+      // Mark as cancelled
+      setHistory(prev => prev.map(a => a.id === apt.id ? { ...a, status: 'Cancelled' } : a));
+      
+      // Free up the slot (mocking releasing the lock back to doctor)
+      setDoctors(prev => prev.map(doc => {
+        if (doc.id === apt.doctorId) {
+          // Re-insert slot and sort them (simplified string sort for demo)
+          const newSlots = [...doc.availableTimeSlots, apt.time].sort();
+          return { ...doc, availableTimeSlots: newSlots };
+        }
+        return doc;
+      }));
+
+      showToast(`Appointment ${apt.id} cancelled successfully`, 'info');
+    });
+  };
+
+  // Views
+  const renderNav = () => (
+    <div className="pk-card" style={{ marginBottom: '2rem', padding: '1rem', display: 'flex', gap: '1rem', overflowX: 'auto' }}>
+      <button className={currentView === 'directory' ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'} onClick={() => setCurrentView('directory')}>Find a Doctor</button>
+      <button className={currentView === 'history' ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'} onClick={() => setCurrentView('history')}>My Appointments</button>
+    </div>
+  );
+
+  const renderDirectory = () => {
+    const filtered = doctors.filter(doc => {
+       const matchSpec = activeSpecialty === 'All' || doc.specialty === activeSpecialty;
+       const matchSearch = doc.name.toLowerCase().includes(searchQuery.toLowerCase());
+       return matchSpec && matchSearch;
+    });
+
+    return (
+       <div className="animate-fade-in">
+          <div className="pk-card pk-glass" style={{ padding: '1.5rem', marginBottom: '2rem', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+             <input 
+                type="text" 
+                className="pk-input" 
+                placeholder="Search doctors by name..." 
+                style={{ width: '100%', maxWidth: '500px' }}
+                value={searchQuery}
+                onChange={e => setSearchQuery(e.target.value)}
+             />
+             <div style={{ display: 'flex', gap: '0.75rem', overflowX: 'auto', paddingBottom: '0.5rem' }}>
+                {hospitalAppointmentMockData.specialties.map(spec => (
+                   <button 
+                      key={spec}
+                      className={activeSpecialty === spec ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'}
+                      style={{ borderRadius: 'var(--pk-radius-full)', padding: '0.5rem 1.25rem', whiteSpace: 'nowrap' }}
+                      onClick={() => setActiveSpecialty(spec)}
+                   >
+                      {spec}
+                   </button>
+                ))}
+             </div>
+          </div>
+
+          <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))' }}>
+             {filtered.map(doc => (
+                <div key={doc.id} className="pk-card pk-card-interactive" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                   <img src={doc.image} alt={doc.name} style={{ width: '120px', height: '120px', borderRadius: '50%', objectFit: 'cover', marginBottom: '1.5rem', boxShadow: 'var(--pk-shadow-md)' }} onError={(e) => {e.target.style.display='none'; e.target.nextSibling.style.display='flex'}} />
+                   <div style={{ display: 'none', width: '120px', height: '120px', borderRadius: '50%', background: 'var(--pk-primary-light)', color: 'var(--pk-primary)', alignItems: 'center', justifyContent: 'center', fontSize: '2rem', fontWeight: 'bold', marginBottom: '1.5rem' }}>
+                      {doc.name.split(' ')[1]?.[0] || 'D'}
+                   </div>
+                   
+                   <h3 className="pk-heading-md" style={{ marginBottom: '0.5rem' }}>{doc.name}</h3>
+                   <span className="pk-badge" style={{ marginBottom: '1rem', background: 'var(--pk-bg-main)', color: 'var(--pk-text-muted)' }}>{doc.specialty}</span>
+                   <span style={{ fontSize: '0.875rem', color: '#f59e0b', fontWeight: 600, marginBottom: '1.5rem' }}>★ {doc.rating} Rating</span>
+                   
+                   <button 
+                      className="pk-btn pk-btn-primary pk-w-full"
+                      onClick={() => { setSelectedDoctor(doc); setCurrentView('booking'); }}
+                   >
+                      Book Appointment
+                   </button>
+                </div>
+             ))}
+          </div>
+       </div>
+    );
+  };
+
+  const renderBooking = () => {
+     if (!selectedDoctor) return null;
+     // Re-fetch doctor from state to ensure slots are accurate
+     const currentDoc = doctors.find(d => d.id === selectedDoctor.id);
+
+     return (
+        <div className="animate-fade-in" style={{ display: 'flex', justifyContent: 'center' }}>
+           <div className="pk-card" style={{ width: '100%', maxWidth: '800px', padding: '3rem' }}>
+              <button className="pk-btn pk-btn-outline" style={{ marginBottom: '2rem' }} onClick={() => setCurrentView('directory')}>← Back</button>
+              
+              <div style={{ display: 'flex', gap: '2rem', alignItems: 'center', marginBottom: '3rem', borderBottom: '1px solid var(--pk-border)', paddingBottom: '2rem' }}>
+                 <img src={currentDoc.image} alt="" style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }} onError={(e)=>{e.target.style.display='none'}} />
+                 <div>
+                    <h2 className="pk-heading-lg">{currentDoc.name}</h2>
+                    <p className="pk-text-body">{currentDoc.specialty}</p>
+                 </div>
+              </div>
+
+              <div className="pk-input-group" style={{ marginBottom: '3rem', maxWidth: '300px' }}>
+                 <label className="pk-label">Select Date: </label>
+                 <input type="date" className="pk-input" value={selectedDate} onChange={e => setSelectedDate(e.target.value)} />
+              </div>
+
+              <h3 className="pk-heading-md" style={{ marginBottom: '1.5rem' }}>Available Time Slots</h3>
+              
+              {currentDoc.availableTimeSlots.length === 0 ? (
+                 <div className="pk-empty-state" style={{ padding: '2rem', border: '1px solid var(--pk-border)' }}>
+                    <h4 className="pk-heading-md">Fully Booked</h4>
+                    <p className="pk-text-body">No remaining slots available for this doctor.</p>
+                 </div>
+              ) : (
+                 <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))' }}>
+                    {currentDoc.availableTimeSlots.map(slot => (
+                       <button 
+                          key={slot}
+                          className="pk-btn pk-btn-outline"
+                          style={{ padding: '1rem', fontSize: '1.125rem' }}
+                          onClick={() => handleBookSlot(slot)}
+                       >
+                          {slot}
+                       </button>
+                    ))}
+                 </div>
+              )}
+           </div>
+        </div>
+     );
+  };
+
+  const renderHistory = () => (
+     <div className="animate-fade-in">
+        <h2 className="pk-heading-lg" style={{ marginBottom: '2rem' }}>Patient History</h2>
+        
+        {history.length === 0 ? (
+           <div className="pk-empty-state">
+              <div className="pk-empty-icon" style={{ fontSize: '4rem' }}>🏥</div>
+              <h3 className="pk-heading-md">No Appointments Found</h3>
+              <p className="pk-text-body">You have not scheduled any appointments yet.</p>
+           </div>
+        ) : (
+           <div className="pk-grid pk-flex-col pk-gap-4">
+              {history.map(apt => (
+                 <div key={apt.id} className="pk-card" style={{ padding: '1.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem', borderLeft: apt.status === 'Cancelled' ? '4px solid var(--pk-danger)' : apt.status === 'Completed' ? '4px solid var(--pk-success)' : '4px solid var(--pk-primary)' }}>
+                    <div>
+                       <h3 className="pk-heading-md">{apt.doctorName}</h3>
+                       <p className="pk-text-sm" style={{ color: 'var(--pk-primary)', fontWeight: 600, marginBottom: '0.5rem' }}>{apt.date} • {apt.time}</p>
+                       <p className="pk-text-sm">ID: {apt.id}</p>
+                    </div>
+                    
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '0.5rem' }}>
+                       <span className="pk-badge" style={{ background: apt.status === 'Scheduled' ? 'var(--pk-primary-light)' : 'var(--pk-bg-main)', color: apt.status === 'Cancelled' ? 'var(--pk-danger)' : 'var(--pk-text-main)' }}>
+                          {apt.status}
+                       </span>
+                       
+                       {apt.status === 'Scheduled' && (
+                          <button 
+                             className="pk-btn pk-btn-outline" 
+                             style={{ color: 'var(--pk-danger)', border: 'none', padding: '0.5rem 1rem' }}
+                             onClick={() => handleCancelAppointment(apt)}
+                          >
+                             Cancel Appointment
+                          </button>
+                       )}
+                    </div>
+                 </div>
+              ))}
+           </div>
+        )}
+     </div>
+  );
+
+  return (
+    <div className="pk-container" style={{ minHeight: '100vh' }}>
+       {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">Processing...</h3>
+         </div>
+       )}
+
+       <div style={{ marginBottom: '2rem' }}>
+          <h1 className="pk-heading-xl">{hospitalAppointmentMockData.hospitalName}</h1>
+          <p className="pk-text-body">Patient portal and reservation network.</p>
+       </div>
+
+       {renderNav()}
+
+       <div style={{ position: 'relative' }}>
+          {currentView === 'directory' && renderDirectory()}
+          {currentView === 'booking' && renderBooking()}
+          {currentView === 'history' && renderHistory()}
+       </div>
+
+       <ToastContainer />
+    </div>
+  );
+}