popsite-ui 1.0.0

package/src/components/modules/StudentRegistrationModule.jsx

@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from 'react';
+import { studentRegistrationMockData } from '../../data/systems/studentRegistration';
+import { useToast } from '../system/Toast';
+
+export function StudentRegistrationModule() {
+  const [currentView, setCurrentView] = useState('roster'); // roster, wizard, edit
+  const [students, setStudents] = useState(studentRegistrationMockData.enrolledStudents);
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  // Wizard State
+  const [wizardStep, setWizardStep] = useState(1);
+  const [formData, setFormData] = useState({
+    firstName: '', lastName: '', email: '', phone: '', department: '', year: ''
+  });
+  
+  // Edit State
+  const [editingStudent, setEditingStudent] = useState(null);
+
+  const { showToast, ToastContainer } = useToast();
+
+  useEffect(() => {
+    const saved = localStorage.getItem('popsite_students');
+    if (saved) {
+      try { setStudents(JSON.parse(saved)); } catch(e){}
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('popsite_students', JSON.stringify(students));
+  }, [students]);
+
+  const validatePhone = (phone) => /^[0-9\-\+\s\(\)]{7,15}$/.test(phone);
+  const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+  const handleNextStep = () => {
+    if (wizardStep === 1) {
+      if (!formData.firstName || !formData.lastName || !formData.email || !formData.phone) {
+        showToast('All fields required', 'error'); return;
+      }
+      if (!validateEmail(formData.email)) {
+        showToast('Invalid email format', 'error'); return;
+      }
+      if (!validatePhone(formData.phone)) {
+        showToast('Invalid phone format', 'error'); return;
+      }
+    } else if (wizardStep === 2) {
+      if (!formData.department || !formData.year) {
+        showToast('Please select department and year', 'error'); return;
+      }
+    }
+    setWizardStep(prev => prev + 1);
+  };
+
+  const submitRegistration = () => {
+    const newStudent = {
+      ...formData,
+      id: `STU-2026-${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`,
+      gpa: 0.0
+    };
+    setStudents([...students, newStudent]);
+    showToast(`${formData.firstName} registered successfully!`, 'success');
+    setCurrentView('roster');
+  };
+
+  const handleEditSave = () => {
+    setStudents(prev => prev.map(s => s.id === editingStudent.id ? editingStudent : s));
+    showToast('Profile updated!', 'success');
+    setCurrentView('roster');
+  };
+
+  const exportCSV = () => {
+    if (students.length === 0) return;
+    const keys = Object.keys(students[0]);
+    const csvContent = keys.join(',') + '\n' + 
+      students.map(s => keys.map(k => `"${s[k]}"`).join(',')).join('\n');
+      
+    const blob = new Blob([csvContent], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `student_roster_${Date.now()}.csv`;
+    a.click();
+    showToast('Roster Exported to CSV', 'success');
+  };
+
+  const startWizard = () => {
+    setFormData({ firstName: '', lastName: '', email: '', phone: '', department: '', year: '' });
+    setWizardStep(1);
+    setCurrentView('wizard');
+  };
+
+  // Views
+  const renderRoster = () => {
+    const filtered = students.filter(s => 
+       `${s.firstName} ${s.lastName}`.toLowerCase().includes(searchQuery.toLowerCase()) ||
+       s.email.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return (
+       <div className="pk-container animate-fade-in">
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '2rem', flexWrap: 'wrap', gap: '1rem' }}>
+             <div>
+                <h1 className="pk-heading-xl" style={{ marginBottom: '0.5rem' }}>{studentRegistrationMockData.schoolName}</h1>
+                <p className="pk-text-body">Admissions & Roster Management</p>
+             </div>
+             <div style={{ display: 'flex', gap: '1rem' }}>
+                <button className="pk-btn pk-btn-outline" onClick={exportCSV}>⬇️ Export CSV</button>
+                <button className="pk-btn pk-btn-primary" onClick={startWizard}>+ New Admission</button>
+             </div>
+          </div>
+
+          <div style={{ marginBottom: '2rem' }}>
+             <input type="text" className="pk-input" style={{ width: '100%', maxWidth: '400px' }} placeholder="Search students by name or email..." value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
+          </div>
+
+          <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))' }}>
+             {filtered.map(st => (
+                <div key={st.id} className="pk-card pk-card-interactive" style={{ padding: '1.5rem' }}>
+                   <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
+                      <span className="pk-badge">{st.id}</span>
+                      <span style={{ fontWeight: 'bold', color: st.gpa >= 3.5 ? 'var(--pk-success)' : 'var(--pk-text-main)' }}>GPA: {st.gpa.toFixed(1)}</span>
+                   </div>
+                   <h3 className="pk-heading-md" style={{ marginBottom: '0.25rem' }}>{st.firstName} {st.lastName}</h3>
+                   <p className="pk-text-sm" style={{ color: 'var(--pk-primary)', marginBottom: '1rem' }}>{st.department} • {st.year}</p>
+                   
+                   <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '1.5rem' }}>
+                      <span className="pk-text-sm">📧 {st.email}</span>
+                      <span className="pk-text-sm">📞 {st.phone}</span>
+                   </div>
+
+                   <button 
+                      className="pk-btn pk-btn-outline pk-w-full"
+                      onClick={() => { setEditingStudent(st); setCurrentView('edit'); }}
+                   >
+                      Edit Profile
+                   </button>
+                </div>
+             ))}
+          </div>
+       </div>
+    );
+  };
+
+  const renderWizard = () => (
+     <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' }}>
+           <div className="pk-card-header" style={{ padding: '2rem', borderBottom: '1px solid var(--pk-border)' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+                 <h2 className="pk-heading-lg">Admission Wizard</h2>
+                 <button className="pk-btn pk-btn-outline" style={{ border: 'none' }} onClick={() => setCurrentView('roster')}>✕ Cancel</button>
+              </div>
+              
+              {/* Visual Progress Bar */}
+              <div style={{ display: 'flex', justifyContent: 'space-between', position: 'relative' }}>
+                 <div style={{ position: 'absolute', top: '50%', left: '0', width: '100%', height: '2px', background: 'var(--pk-border)', zIndex: 0, transform: 'translateY(-50%)' }}></div>
+                 <div style={{ position: 'absolute', top: '50%', left: '0', width: `${((wizardStep - 1) / 2) * 100}%`, height: '2px', background: 'var(--pk-primary)', zIndex: 1, transform: 'translateY(-50%)', transition: 'width 0.3s' }}></div>
+                 
+                 {['Personal', 'Academic', 'Review'].map((step, idx) => (
+                    <div key={idx} style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', width: '40px' }}>
+                       <div style={{ width: '24px', height: '24px', borderRadius: '50%', background: wizardStep > idx ? 'var(--pk-primary)' : 'var(--pk-bg-main)', border: `2px solid ${wizardStep >= idx + 1 ? 'var(--pk-primary)' : 'var(--pk-border)'}`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '10px' }}>
+                          {wizardStep > idx ? '✓' : idx + 1}
+                       </div>
+                       <span style={{ position: 'absolute', bottom: '-20px', fontSize: '0.75rem', color: wizardStep >= idx + 1 ? 'var(--pk-text-main)' : 'var(--pk-text-muted)' }}>{step}</span>
+                    </div>
+                 ))}
+              </div>
+           </div>
+
+           <div className="pk-card-body" style={{ padding: '3rem 2rem' }}>
+              {wizardStep === 1 && (
+                 <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+                    <div style={{ display: 'flex', gap: '1rem' }}>
+                       <div className="pk-input-group" style={{ flex: 1 }}>
+                          <label className="pk-label">First Name *</label>
+                          <input type="text" className="pk-input" value={formData.firstName} onChange={e => setFormData({...formData, firstName: e.target.value})} />
+                       </div>
+                       <div className="pk-input-group" style={{ flex: 1 }}>
+                          <label className="pk-label">Last Name *</label>
+                          <input type="text" className="pk-input" value={formData.lastName} onChange={e => setFormData({...formData, lastName: e.target.value})} />
+                       </div>
+                    </div>
+                    <div className="pk-input-group">
+                       <label className="pk-label">Email Address *</label>
+                       <input type="email" className="pk-input" value={formData.email} onChange={e => setFormData({...formData, email: e.target.value})} placeholder="student@example.com" />
+                    </div>
+                    <div className="pk-input-group">
+                       <label className="pk-label">Phone Number *</label>
+                       <input type="tel" className="pk-input" value={formData.phone} onChange={e => setFormData({...formData, phone: e.target.value})} placeholder="555-0100" />
+                    </div>
+                 </div>
+              )}
+
+              {wizardStep === 2 && (
+                 <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+                    <div className="pk-input-group">
+                       <label className="pk-label">Target Department *</label>
+                       <select className="pk-input" value={formData.department} onChange={e => setFormData({...formData, department: e.target.value})}>
+                          <option value="">-- Select Department --</option>
+                          {studentRegistrationMockData.departments.map(d => <option key={d} value={d}>{d}</option>)}
+                       </select>
+                    </div>
+                    <div className="pk-input-group">
+                       <label className="pk-label">Entry Year *</label>
+                       <select className="pk-input" value={formData.year} onChange={e => setFormData({...formData, year: e.target.value})}>
+                          <option value="">-- Select Level --</option>
+                          <option value="Freshman">Freshman</option>
+                          <option value="Transfer">Transfer</option>
+                          <option value="Graduate">Graduate</option>
+                       </select>
+                    </div>
+                 </div>
+              )}
+
+              {wizardStep === 3 && (
+                 <div>
+                    <h3 className="pk-heading-md" style={{ marginBottom: '1.5rem' }}>Review Application</h3>
+                    <div style={{ background: 'var(--pk-bg-main)', padding: '1.5rem', borderRadius: 'var(--pk-radius-md)' }}>
+                       <table style={{ width: '100%', textAlign: 'left' }}>
+                          <tbody>
+                             <tr><td style={{ padding: '0.5rem', color: 'var(--pk-text-muted)' }}>Name</td><td style={{ fontWeight: 600 }}>{formData.firstName} {formData.lastName}</td></tr>
+                             <tr><td style={{ padding: '0.5rem', color: 'var(--pk-text-muted)' }}>Email</td><td style={{ fontWeight: 600 }}>{formData.email}</td></tr>
+                             <tr><td style={{ padding: '0.5rem', color: 'var(--pk-text-muted)' }}>Phone</td><td style={{ fontWeight: 600 }}>{formData.phone}</td></tr>
+                             <tr><td style={{ padding: '0.5rem', color: 'var(--pk-text-muted)' }}>Dept</td><td style={{ fontWeight: 600 }}>{formData.department}</td></tr>
+                             <tr><td style={{ padding: '0.5rem', color: 'var(--pk-text-muted)' }}>Year</td><td style={{ fontWeight: 600 }}>{formData.year}</td></tr>
+                          </tbody>
+                       </table>
+                    </div>
+                 </div>
+              )}
+           </div>
+
+           <div className="pk-card-footer" style={{ display: 'flex', justifyContent: 'space-between', padding: '1.5rem 2rem' }}>
+              <button 
+                className="pk-btn pk-btn-outline" 
+                style={{ visibility: wizardStep === 1 ? 'hidden' : 'visible' }}
+                onClick={() => setWizardStep(prev => prev - 1)}
+              >
+                 ← Previous
+              </button>
+              {wizardStep < 3 ? (
+                 <button className="pk-btn pk-btn-primary" onClick={handleNextStep}>Next Step →</button>
+              ) : (
+                 <button className="pk-btn pk-btn-primary" style={{ background: 'var(--pk-success)' }} onClick={submitRegistration}>Confirm Admission ✅</button>
+              )}
+           </div>
+        </div>
+     </div>
+  );
+
+  const renderEdit = () => {
+    if (!editingStudent) return null;
+    return (
+       <div className="pk-container animate-fade-in" style={{ display: 'flex', justifyContent: 'center' }}>
+          <div className="pk-card" style={{ width: '100%', maxWidth: '600px', padding: '3rem' }}>
+             <h2 className="pk-heading-lg" style={{ marginBottom: '2rem' }}>Edit Profile: {editingStudent.id}</h2>
+             
+             <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
+                <div className="pk-input-group" style={{ flex: 1 }}>
+                   <label className="pk-label">First Name</label>
+                   <input type="text" className="pk-input" value={editingStudent.firstName} onChange={e => setEditingStudent({...editingStudent, firstName: e.target.value})} />
+                </div>
+                <div className="pk-input-group" style={{ flex: 1 }}>
+                   <label className="pk-label">Last Name</label>
+                   <input type="text" className="pk-input" value={editingStudent.lastName} onChange={e => setEditingStudent({...editingStudent, lastName: e.target.value})} />
+                </div>
+             </div>
+
+             <div className="pk-input-group" style={{ marginBottom: '1rem' }}>
+                <label className="pk-label">Department</label>
+                <select className="pk-input" value={editingStudent.department} onChange={e => setEditingStudent({...editingStudent, department: e.target.value})}>
+                   {studentRegistrationMockData.departments.map(d => <option key={d} value={d}>{d}</option>)}
+                </select>
+             </div>
+
+             <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem', marginTop: '3rem' }}>
+                <button className="pk-btn pk-btn-outline" onClick={() => setCurrentView('roster')}>Cancel</button>
+                <button className="pk-btn pk-btn-primary" onClick={handleEditSave}>Save Profile</button>
+             </div>
+          </div>
+       </div>
+    );
+  };
+
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh', backgroundColor: 'var(--pk-bg-main)' }}>
+       {currentView === 'roster' && renderRoster()}
+       {currentView === 'wizard' && renderWizard()}
+       {currentView === 'edit' && renderEdit()}
+       <ToastContainer />
+    </div>
+  );
+}

package/src/components/system/SystemHero.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+export function SystemHero({ title, subtitle, bgImage, children }) {
+  return (
+    <div 
+      className="pk-card pk-glass" 
+      style={{ 
+        position: 'relative',
+        margin: '2rem 0', 
+        padding: '4rem 2rem', 
+        textAlign: 'center',
+        overflow: 'hidden',
+        background: bgImage 
+          ? `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url(${bgImage}) center/cover`
+          : 'var(--pk-bg-glass)',
+        color: bgImage ? 'white' : 'inherit'
+      }}
+    >
+      <div style={{ position: 'relative', zIndex: 10 }}>
+        <h1 className={bgImage ? 'pk-heading-xl' : 'pk-heading-xl pk-gradient-text'} style={{ marginBottom: '1rem' }}>
+          {title}
+        </h1>
+        <p className="pk-text-body" style={{ color: bgImage ? 'rgba(255,255,255,0.9)' : 'var(--pk-text-muted)', fontSize: '1.25rem', maxWidth: '600px', margin: '0 auto 2rem' }}>
+          {subtitle}
+        </p>
+        <div>
+          {children}
+        </div>
+      </div>
+      {!bgImage && (
+        <div style={{ 
+          position: 'absolute', 
+          top: '-50%', left: '-10%', 
+          width: '500px', height: '500px', 
+          background: 'radial-gradient(circle, var(--pk-primary-light) 0%, transparent 70%)',
+          opacity: 0.5,
+          zIndex: 0,
+          borderRadius: '50%',
+          pointerEvents: 'none'
+        }} />
+      )}
+    </div>
+  );
+}

package/src/components/system/SystemSummaryCard.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export function SystemSummaryCard({ title, value, icon, trend, trendLabel }) {
+  const isPositive = trend && trend > 0;
+  const isNegative = trend && trend < 0;
+
+  return (
+    <div className="pk-card pk-card-interactive" style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <div className="pk-flex pk-justify-between pk-items-center">
+        <h3 className="pk-label" style={{ color: 'var(--pk-text-muted)' }}>{title}</h3>
+        <span style={{ fontSize: '1.5rem', opacity: 0.8 }}>{icon}</span>
+      </div>
+      <div>
+        <div className="pk-heading-md" style={{ marginBottom: '0.5rem' }}>{value}</div>
+        {trend !== undefined && (
+          <div className="pk-flex pk-items-center" style={{ gap: '0.5rem', fontSize: '0.875rem' }}>
+            <span style={{ 
+              fontWeight: 600,
+              color: isPositive ? 'var(--pk-success)' : isNegative ? 'var(--pk-danger)' : 'var(--pk-text-muted)' 
+            }}>
+              {isPositive ? '↑' : isNegative ? '↓' : '-'} {Math.abs(trend)}%
+            </span>
+            <span style={{ color: 'var(--pk-text-muted)' }}>{trendLabel || 'vs last month'}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/system/Toast.jsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+
+/**
+ * Toast System Component
+ * Lightweight toast system for success/error messages.
+ */
+export function Toast({ message, type = 'success', onClose, duration = 3000 }) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(() => {
+        if (onClose) onClose();
+      }, 300); // Wait for transition to finish
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  if (!isVisible && !onClose) return null;
+
+  return (
+    <div className={`pk-toast ${type} ${isVisible ? '' : 'pk-fade-out'}`} style={{ opacity: isVisible ? 1 : 0, transition: 'opacity 0.3s ease-out' }}>
+      <div style={{ fontSize: '1.25rem' }}>
+        {type === 'success' ? '✅' : type === 'error' ? '❌' : 'ℹ️'}
+      </div>
+      <div style={{ flex: 1 }}>
+        <p className="pk-label" style={{ margin: 0, textTransform: 'capitalize' }}>{type}</p>
+        <p className="pk-text-sm" style={{ margin: 0 }}>{message}</p>
+      </div>
+      <button 
+        onClick={() => { setIsVisible(false); if(onClose) setTimeout(onClose, 300); }} 
+        style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '1.25rem', color: 'var(--pk-text-muted)' }}
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
+// Simple Toast Manager Hook for modules
+export function useToast() {
+  const [toasts, setToasts] = useState([]);
+
+  const showToast = (message, type = 'success') => {
+    const id = Date.now();
+    setToasts(prev => [...prev, { id, message, type }]);
+  };
+
+  const removeToast = (id) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  };
+
+  const ToastContainer = () => (
+    <div className="pk-toast-container">
+      {toasts.map(toast => (
+        <Toast 
+          key={toast.id} 
+          message={toast.message} 
+          type={toast.type} 
+          onClose={() => removeToast(toast.id)} 
+        />
+      ))}
+    </div>
+  );
+
+  return { showToast, ToastContainer };
+}

package/src/data/systems/analyticsDashboard.js

@@ -0,0 +1,32 @@
+export const analyticsDashboardMockData = {
+  organizationName: "Global Tech Solutions",
+  kpis: {
+    revenue: { value: "$124,500", trend: 12.5 },
+    users: { value: "14,245", trend: 8.2 },
+    conversionRate: { value: "4.8%", trend: -1.2 },
+    bounceRate: { value: "32.1%", trend: -5.4 }
+  },
+  financialReports: [
+    { id: "RPT-001", period: "Q1 2026", revenue: 124500, expenses: 84000, net: 40500, status: "Finalized" },
+    { id: "RPT-002", period: "Q4 2025", revenue: 118000, expenses: 82000, net: 36000, status: "Finalized" },
+    { id: "RPT-003", period: "Q3 2025", revenue: 105000, expenses: 76000, net: 29000, status: "Finalized" },
+    { id: "RPT-004", period: "Q2 2025", revenue: 98000, expenses: 71000, net: 27000, status: "Finalized" }
+  ],
+  systemLogs: [
+    { id: "log1", timestamp: "2026-04-08 10:15:00", level: "INFO", message: "User array successfully synchronized.", service: "AuthService" },
+    { id: "log2", timestamp: "2026-04-08 10:12:45", level: "WARN", message: "API rate limit approaching for endpoint /v2/data.", service: "APIGateway" },
+    { id: "log3", timestamp: "2026-04-08 10:05:12", level: "ERROR", message: "Database connection timeout after 3000ms.", service: "DBService" },
+    { id: "log4", timestamp: "2026-04-08 09:45:00", level: "INFO", message: "Daily backup completed successfully.", service: "BackupAgent" },
+    { id: "log5", timestamp: "2026-04-08 09:30:22", level: "INFO", message: "New deployment v4.5.1 rolled out.", service: "CI/CD" },
+    { id: "log6", timestamp: "2026-04-08 09:15:00", level: "WARN", message: "High memory trace detected in worker node 4.", service: "ComputeEngine" }
+  ],
+  chartData: [
+    { label: "Mon", value: 30 },
+    { label: "Tue", value: 45 },
+    { label: "Wed", value: 25 },
+    { label: "Thu", value: 60 },
+    { label: "Fri", value: 85 },
+    { label: "Sat", value: 40 },
+    { label: "Sun", value: 50 }
+  ]
+};

package/src/data/systems/chatMessaging.js

@@ -0,0 +1,59 @@
+export const chatMessagingMockData = {
+  currentUser: {
+    id: "me",
+    name: "Alex Designer",
+    avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=150&q=80",
+    status: "online"
+  },
+  conversations: [
+    {
+      id: "c1",
+      contact: {
+        id: "u1",
+        name: "Sarah Engineering",
+        avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&q=80",
+        status: "online"
+      },
+      messages: [
+        { id: "m1", senderId: "u1", text: "Hey! Did you get a chance to look at the new PopSite UI designs?", timestamp: "10:05 AM" },
+        { id: "m2", senderId: "me", text: "Yes! They look absolutely stunning. The glassmorphism is on point.", timestamp: "10:12 AM" },
+        { id: "m3", senderId: "u1", text: "Awesome! We should deploy the new modules by tomorrow.", timestamp: "10:14 AM" }
+      ],
+      unread: 0
+    },
+    {
+      id: "c2",
+      contact: {
+        id: "u2",
+        name: "PopSite AI Assistant",
+        avatar: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&w=150&q=80",
+        status: "online"
+      },
+      messages: [
+        { id: "m1", senderId: "u2", text: "Hello! I'm your virtual UI assistant. How can I help you today?", timestamp: "09:00 AM" }
+      ],
+      unread: 1
+    },
+    {
+      id: "c3",
+      contact: {
+        id: "u3",
+        name: "Marketing Team",
+        avatar: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=150&q=80",
+        status: "offline"
+      },
+      messages: [
+        { id: "m1", senderId: "u3", text: "The new campaign numbers are looking good.", timestamp: "Yesterday" }
+      ],
+      unread: 0
+    }
+  ],
+  autoReplies: [
+    "That sounds great!",
+    "I completely agree. Let's make it happen.",
+    "Could you clarify that a bit more?",
+    "Fascinating! The possibilities are endless.",
+    "I've updated the system parameters accordingly.",
+    "Let me think about that for a second..."
+  ]
+};

package/src/data/systems/ecommerceStore.js

@@ -0,0 +1,84 @@
+export const ecommerceMockData = {
+  storeName: "PopSite Originals",
+  categories: ["All", "Apparel", "Accessories", "Footwear", "Tech"],
+  products: [
+    {
+      id: "p1",
+      name: "Prismatic Hoodie",
+      price: 89.99,
+      category: "Apparel",
+      image: "https://images.unsplash.com/photo-1556821840-3a63f95609a7?auto=format&fit=crop&w=800&q=80",
+      description: "Premium cotton hoodie featuring a subtle iridescent logo. Perfect for chilly evenings and casual flexes.",
+      sizes: ["S", "M", "L", "XL"],
+      colors: ["Black", "Heather Grey", "Lavender"],
+      inStock: true,
+      rating: 4.8,
+      reviews: 124
+    },
+    {
+      id: "p2",
+      name: "Aerodynamic Runners",
+      price: 145.00,
+      category: "Footwear",
+      image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=800&q=80",
+      description: "Ultralight sneakers designed for maximum comfort. Carbon-infused sole brings explosive returns.",
+      sizes: ["8", "9", "10", "11", "12"],
+      colors: ["Neon Red", "Obsidian"],
+      inStock: true,
+      rating: 4.9,
+      reviews: 89
+    },
+    {
+      id: "p3",
+      name: "Minimalist Chronograph",
+      price: 210.00,
+      category: "Accessories",
+      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=800&q=80",
+      description: "Matte black stainless steel with a sleek sapphire crystal face. Water resistant to 50 meters.",
+      sizes: ["One Size"],
+      colors: ["Matte Black"],
+      inStock: false,
+      rating: 4.7,
+      reviews: 56
+    },
+    {
+      id: "p4",
+      name: "Noise-Cancelling Pods Pro",
+      price: 199.99,
+      category: "Tech",
+      image: "https://images.unsplash.com/photo-1606220588913-b3aecb2ac201?auto=format&fit=crop&w=800&q=80",
+      description: "Immersive audio experience with active noise cancellation and 24-hour battery life.",
+      sizes: [],
+      colors: ["White", "Space Gray"],
+      inStock: true,
+      rating: 4.5,
+      reviews: 210
+    },
+    {
+      id: "p5",
+      name: "Urban Backpack",
+      price: 75.00,
+      category: "Accessories",
+      image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=800&q=80",
+      description: "Water-resistant commuter backpack with padded laptop sleeve and hidden anti-theft pockets.",
+      sizes: ["One Size"],
+      colors: ["Charcoal", "Olive Drab"],
+      inStock: true,
+      rating: 4.6,
+      reviews: 178
+    },
+    {
+      id: "p6",
+      name: "Graphic Tee - The Wave",
+      price: 35.00,
+      category: "Apparel",
+      image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=800&q=80",
+      description: "Heavyweight boxy organic cotton tee with a retro wave graphic.",
+      sizes: ["S", "M", "L"],
+      colors: ["White", "Sand"],
+      inStock: true,
+      rating: 4.3,
+      reviews: 45
+    }
+  ]
+};

package/src/data/systems/eventBooking.js

@@ -0,0 +1,33 @@
+export const eventBookingMockData = {
+  platformName: "PopSite Tickets",
+  upcomingEvents: [
+    {
+      id: "ev1",
+      title: "Global Tech Summit 2026",
+      date: new Date(Date.now() + 86400000 * 5).toISOString(), // 5 days from now
+      location: "San Francisco Convention Center",
+      image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=800&q=80",
+      description: "The premier gathering of global tech leaders discussing AI, web architecture, and edge computing.",
+      speakers: ["Dr. Evelyn Stone (AI Lead, Acme)", "Marcus Chen (Founder, WebCorp)"],
+      agenda: ["09:00 - Keynote", "11:30 - The Future of Vanilla CSS", "15:00 - Networking Mixer"],
+      tiers: [
+         { id: "t1", name: "General Admission", price: 299, capacity: 50 },
+         { id: "t2", name: "VIP Backstage", price: 899, capacity: 0 } // Sold out mock
+      ]
+    },
+    {
+      id: "ev2",
+      title: "Electronic Music Paradise",
+      date: new Date(Date.now() + 86400000 * 12).toISOString(), // 12 days from now
+      location: "Miami Beach Outdoor Arena",
+      image: "https://images.unsplash.com/photo-1470229722913-7c090be5f524?auto=format&fit=crop&w=800&q=80",
+      description: "A 3-day outdoor electronic music festival featuring top global DJs and immersive light shows.",
+      speakers: ["DJ Nova", "The Synthetics"],
+      agenda: ["Day 1 - Opening Ceremony", "Day 2 - Sunset Stage", "Day 3 - Fireworks Finale"],
+      tiers: [
+         { id: "t3", name: "3-Day Pass", price: 349, capacity: 1500 },
+         { id: "t4", name: "VIP + Artist Meet", price: 1200, capacity: 15 }
+      ]
+    }
+  ]
+};