popsite-ui 1.0.0

package/components/modules/moduleEnhancementsMap.js

@@ -0,0 +1,439 @@
+const moduleEnhancementsMap = {
+    'movie-booking': {
+        widget: {
+            type: 'seat-map',
+            title: 'Live Seat Map',
+            occupiedSeats: ['A2', 'A3', 'B4', 'B6', 'C1', 'C7', 'D3', 'E5', 'F2']
+        },
+        presets: [
+            {
+                label: 'Friday Prime Show',
+                data: {
+                    customerName: 'Mason Clarke',
+                    movieTitle: 'Dune: Part Two',
+                    showDate: '2026-05-09',
+                    showTime: '07:00 PM',
+                    seats: 4,
+                    seatType: 'Premium'
+                }
+            },
+            {
+                label: 'Late Night Recliner',
+                data: {
+                    customerName: 'Ava Turner',
+                    movieTitle: 'Interstellar',
+                    showDate: '2026-05-10',
+                    showTime: '10:15 PM',
+                    seats: 2,
+                    seatType: 'Recliner'
+                }
+            }
+        ]
+    },
+    'flight-booking': {
+        widget: {
+            type: 'route-timeline',
+            title: 'Journey Timeline',
+            points: ['Chennai', 'Dubai', 'London']
+        },
+        presets: [
+            {
+                label: 'Business Route',
+                data: {
+                    passengerName: 'Sophia Walker',
+                    origin: 'Mumbai',
+                    destination: 'London',
+                    travelDate: '2026-06-02',
+                    passengers: 2,
+                    cabinClass: 'Business'
+                }
+            },
+            {
+                label: 'Economy Family',
+                data: {
+                    passengerName: 'Noah Edwards',
+                    origin: 'Delhi',
+                    destination: 'Singapore',
+                    travelDate: '2026-06-14',
+                    passengers: 4,
+                    cabinClass: 'Economy'
+                }
+            }
+        ]
+    },
+    'hotel-booking': {
+        widget: {
+            type: 'occupancy-meter',
+            title: 'Property Occupancy',
+            percentage: 82
+        },
+        presets: [
+            {
+                label: 'Weekend Deluxe',
+                data: {
+                    guestName: 'Liam Harris',
+                    city: 'Goa',
+                    checkInDate: '2026-05-22',
+                    nights: 3,
+                    roomType: 'Deluxe',
+                    guests: 2
+                }
+            },
+            {
+                label: 'Family Suite',
+                data: {
+                    guestName: 'Emma Collins',
+                    city: 'Jaipur',
+                    checkInDate: '2026-06-08',
+                    nights: 4,
+                    roomType: 'Suite',
+                    guests: 4
+                }
+            }
+        ]
+    },
+    'event-ticket-booking': {
+        widget: {
+            type: 'kpi-spark-cards',
+            title: 'Event Demand Signals',
+            cards: [
+                { label: 'Pass Sales', value: '1,920', trend: [4, 5, 6, 8, 9, 11, 10] },
+                { label: 'VIP Upgrade', value: '22%', trend: [2, 3, 3, 4, 5, 5, 6] },
+                { label: 'Check-in Speed', value: '14 min', trend: [8, 8, 7, 7, 6, 6, 5] }
+            ]
+        },
+        presets: [
+            {
+                label: 'Tech Summit Day',
+                data: {
+                    attendeeName: 'Lucas Young',
+                    eventName: 'Tech Summit 2026',
+                    eventDate: '2026-07-03',
+                    passes: 3,
+                    accessZone: 'VIP',
+                    notes: 'Need front row seating'
+                }
+            },
+            {
+                label: 'Concert Crew',
+                data: {
+                    attendeeName: 'Mia Scott',
+                    eventName: 'Indie Night Live',
+                    eventDate: '2026-07-11',
+                    passes: 5,
+                    accessZone: 'General',
+                    notes: 'Group booking under same QR batch'
+                }
+            }
+        ]
+    },
+    'food-ordering': {
+        widget: {
+            type: 'kpi-spark-cards',
+            title: 'Delivery Performance',
+            cards: [
+                { label: 'Orders Today', value: '12.4k', trend: [5, 6, 8, 9, 10, 11, 12] },
+                { label: 'On-time Rate', value: '93%', trend: [7, 7, 8, 8, 8, 9, 9] },
+                { label: 'Avg Basket', value: '$18', trend: [3, 4, 4, 5, 5, 6, 6] }
+            ]
+        },
+        presets: [
+            {
+                label: 'Lunch Rush',
+                data: {
+                    customerName: 'Olivia Allen',
+                    restaurant: 'Urban Bowl',
+                    deliveryDate: '2026-05-01',
+                    deliveryWindow: '30 mins',
+                    items: 6,
+                    deliveryType: 'Express'
+                }
+            },
+            {
+                label: 'Dinner Family Pack',
+                data: {
+                    customerName: 'Ethan Campbell',
+                    restaurant: 'Spice Factory',
+                    deliveryDate: '2026-05-01',
+                    deliveryWindow: '60 mins',
+                    items: 9,
+                    deliveryType: 'Standard'
+                }
+            }
+        ]
+    },
+    'ecommerce-store': {
+        widget: {
+            type: 'kpi-spark-cards',
+            title: 'Store Conversion KPIs',
+            cards: [
+                { label: 'Sessions', value: '86k', trend: [8, 9, 10, 11, 10, 12, 13] },
+                { label: 'Conversion', value: '14.7%', trend: [3, 4, 4, 5, 5, 6, 6] },
+                { label: 'AOV', value: '$73', trend: [4, 4, 5, 5, 6, 6, 7] }
+            ]
+        },
+        presets: [
+            {
+                label: 'Prime Electronics',
+                data: {
+                    customerName: 'Benjamin Hill',
+                    category: 'Electronics',
+                    dispatchDate: '2026-05-04',
+                    quantity: 3,
+                    deliveryPlan: 'Prime',
+                    addressNote: 'Office reception before 6 PM'
+                }
+            },
+            {
+                label: 'Home Decor Bulk',
+                data: {
+                    customerName: 'Charlotte Green',
+                    category: 'Home Decor',
+                    dispatchDate: '2026-05-06',
+                    quantity: 7,
+                    deliveryPlan: 'Standard',
+                    addressNote: 'Call before delivery'
+                }
+            }
+        ]
+    },
+    'library-management': {
+        widget: {
+            type: 'occupancy-meter',
+            title: 'Reading Hall Occupancy',
+            percentage: 68
+        },
+        presets: [
+            {
+                label: 'Scholar Borrow',
+                data: {
+                    librarianName: 'Devika Nair',
+                    memberName: 'Noah Carter',
+                    bookCategory: 'Technology',
+                    issueDate: '2026-05-03',
+                    borrowDays: 14,
+                    membershipType: 'Scholar'
+                }
+            },
+            {
+                label: 'Premium Long Borrow',
+                data: {
+                    librarianName: 'Arun Das',
+                    memberName: 'Ivy White',
+                    bookCategory: 'Business',
+                    issueDate: '2026-05-07',
+                    borrowDays: 30,
+                    membershipType: 'Premium'
+                }
+            }
+        ]
+    },
+    'student-registration': {
+        widget: {
+            type: 'kpi-spark-cards',
+            title: 'Enrollment Funnel',
+            cards: [
+                { label: 'Applications', value: '5,200', trend: [6, 7, 8, 8, 9, 10, 11] },
+                { label: 'Verified', value: '92%', trend: [6, 6, 7, 7, 8, 8, 9] },
+                { label: 'Avg Turnaround', value: '4.5 min', trend: [9, 8, 8, 7, 7, 6, 6] }
+            ]
+        },
+        presets: [
+            {
+                label: 'Regular Intake',
+                data: {
+                    studentName: 'Aarav Menon',
+                    registerNo: 'VIT-26-0301',
+                    email: 'aarav.menon@example.edu',
+                    course: 'B.Tech CSE',
+                    semester: 2,
+                    registrationType: 'Regular'
+                }
+            },
+            {
+                label: 'International Applicant',
+                data: {
+                    studentName: 'Sana Ibrahim',
+                    registerNo: 'VIT-INT-0412',
+                    email: 'sana.ibrahim@example.edu',
+                    course: 'B.Sc Data Science',
+                    semester: 1,
+                    registrationType: 'International'
+                }
+            }
+        ]
+    },
+    'hospital-appointment': {
+        widget: {
+            type: 'route-timeline',
+            title: 'Care Path Timeline',
+            points: ['Triage', 'Consultation', 'Diagnostics', 'Follow-up']
+        },
+        presets: [
+            {
+                label: 'Priority Appointment',
+                data: {
+                    patientName: 'Daniel King',
+                    department: 'Cardiology',
+                    appointmentDate: '2026-05-05',
+                    slots: 2,
+                    consultationMode: 'Priority',
+                    symptoms: 'Chest discomfort and dizziness'
+                }
+            },
+            {
+                label: 'Telehealth Follow-up',
+                data: {
+                    patientName: 'Harper Adams',
+                    department: 'General Medicine',
+                    appointmentDate: '2026-05-08',
+                    slots: 1,
+                    consultationMode: 'Telehealth',
+                    symptoms: 'Routine post-treatment review'
+                }
+            }
+        ]
+    },
+    'invoice-billing': {
+        widget: {
+            type: 'kpi-spark-cards',
+            title: 'Billing Health Metrics',
+            cards: [
+                { label: 'Invoices', value: '3,900', trend: [5, 6, 7, 8, 8, 9, 10] },
+                { label: 'Collection', value: '94%', trend: [7, 7, 8, 8, 9, 9, 9] },
+                { label: 'Avg Amount', value: '$1,280', trend: [4, 5, 5, 6, 6, 7, 7] }
+            ]
+        },
+        presets: [
+            {
+                label: 'Retainer Invoice',
+                data: {
+                    clientName: 'Northwind Labs',
+                    serviceType: 'Consulting',
+                    invoiceDate: '2026-05-01',
+                    billableUnits: 40,
+                    billingPlan: 'Retainer',
+                    memo: 'Monthly strategic advisory retainer'
+                }
+            },
+            {
+                label: 'Project Billing',
+                data: {
+                    clientName: 'Skyline Retail',
+                    serviceType: 'Engineering',
+                    invoiceDate: '2026-05-12',
+                    billableUnits: 65,
+                    billingPlan: 'Project',
+                    memo: 'Milestone 2 implementation billing'
+                }
+            }
+        ]
+    },
+    'chat-messaging': {
+        widget: {
+            type: 'kpi-spark-cards',
+            title: 'Messaging Adoption',
+            cards: [
+                { label: 'Daily Messages', value: '4.8M', trend: [6, 7, 8, 9, 10, 11, 12] },
+                { label: 'Seat Utilization', value: '79%', trend: [5, 6, 6, 7, 7, 8, 8] },
+                { label: 'Retention', value: '88%', trend: [6, 6, 7, 7, 8, 8, 9] }
+            ]
+        },
+        presets: [
+            {
+                label: 'Business Team Launch',
+                data: {
+                    workspaceName: 'Blue Orbit Team',
+                    teamLead: 'Priya Das',
+                    activeUsers: 80,
+                    goLiveDate: '2026-06-01',
+                    planTier: 'Business',
+                    supportWindow: 'Extended Hours'
+                }
+            },
+            {
+                label: 'Enterprise Rollout',
+                data: {
+                    workspaceName: 'Vertex Global Ops',
+                    teamLead: 'Lara Bennett',
+                    activeUsers: 220,
+                    goLiveDate: '2026-06-15',
+                    planTier: 'Enterprise',
+                    supportWindow: '24x7 Support'
+                }
+            }
+        ]
+    },
+    'analytics-dashboard': {
+        widget: {
+            type: 'kpi-spark-cards',
+            title: 'Pipeline Trend Cards',
+            cards: [
+                { label: 'Data Sources', value: '1,100+', trend: [7, 7, 8, 8, 9, 10, 10] },
+                { label: 'Refresh Success', value: '99.9%', trend: [8, 8, 8, 9, 9, 9, 9] },
+                { label: 'Active Analysts', value: '64', trend: [4, 5, 5, 6, 6, 7, 7] }
+            ]
+        },
+        presets: [
+            {
+                label: 'Executive KPI Stack',
+                data: {
+                    accountName: 'Growth Intelligence',
+                    dashboardType: 'Executive KPI',
+                    dataSources: 16,
+                    refreshRate: 'Hourly',
+                    analystSeats: 22,
+                    subscriptionTier: 'Pro'
+                }
+            },
+            {
+                label: 'Finance Control Board',
+                data: {
+                    accountName: 'NorthPeak Finance',
+                    dashboardType: 'Finance Control',
+                    dataSources: 32,
+                    refreshRate: 'Every 6 Hours',
+                    analystSeats: 40,
+                    subscriptionTier: 'Elite'
+                }
+            }
+        ]
+    },
+    'quiz-exam': {
+        widget: {
+            type: 'kpi-spark-cards',
+            title: 'Assessment Ops',
+            cards: [
+                { label: 'Exams per Term', value: '860', trend: [5, 6, 6, 7, 7, 8, 8] },
+                { label: 'Candidate Load', value: '2,000', trend: [6, 7, 8, 8, 9, 9, 10] },
+                { label: 'Integrity Score', value: '97%', trend: [7, 7, 8, 8, 8, 9, 9] }
+            ]
+        },
+        presets: [
+            {
+                label: 'Proctored Midterm',
+                data: {
+                    instructorName: 'Nina Thomas',
+                    examTitle: 'Data Structures Midterm',
+                    examDate: '2026-05-19',
+                    questionCount: 60,
+                    candidates: 180,
+                    examMode: 'Proctored'
+                }
+            },
+            {
+                label: 'Certification Batch',
+                data: {
+                    instructorName: 'Rahul Sen',
+                    examTitle: 'Cloud Practitioner Certification',
+                    examDate: '2026-06-10',
+                    questionCount: 90,
+                    candidates: 420,
+                    examMode: 'Certification'
+                }
+            }
+        ]
+    }
+};
+
+export default moduleEnhancementsMap;

package/components/modules/systemModuleMap.js

@@ -0,0 +1,31 @@
+import MovieBookingModule from './MovieBookingModule';
+import FlightBookingModule from './FlightBookingModule';
+import HotelBookingModule from './HotelBookingModule';
+import EventTicketBookingModule from './EventTicketBookingModule';
+import FoodOrderingModule from './FoodOrderingModule';
+import EcommerceStoreModule from './EcommerceStoreModule';
+import LibraryManagementModule from './LibraryManagementModule';
+import StudentRegistrationModule from './StudentRegistrationModule';
+import HospitalAppointmentModule from './HospitalAppointmentModule';
+import InvoiceBillingModule from './InvoiceBillingModule';
+import ChatMessagingModule from './ChatMessagingModule';
+import AnalyticsDashboardModule from './AnalyticsDashboardModule';
+import QuizExamModule from './QuizExamModule';
+
+const systemModuleMap = {
+    'movie-booking': MovieBookingModule,
+    'flight-booking': FlightBookingModule,
+    'hotel-booking': HotelBookingModule,
+    'event-ticket-booking': EventTicketBookingModule,
+    'food-ordering': FoodOrderingModule,
+    'ecommerce-store': EcommerceStoreModule,
+    'library-management': LibraryManagementModule,
+    'student-registration': StudentRegistrationModule,
+    'hospital-appointment': HospitalAppointmentModule,
+    'invoice-billing': InvoiceBillingModule,
+    'chat-messaging': ChatMessagingModule,
+    'analytics-dashboard': AnalyticsDashboardModule,
+    'quiz-exam': QuizExamModule
+};
+
+export default systemModuleMap;

package/components/system/DynamicSystemForm.jsx

@@ -0,0 +1,154 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { buildInitialFormData } from '../../utils/systemEngine';
+
+function DynamicSystemForm({ system, onSubmit, presets = [] }) {
+    const initialValues = useMemo(() => {
+        return buildInitialFormData(system.fields);
+    }, [system]);
+
+    const [formData, setFormData] = useState(initialValues);
+
+    useEffect(() => {
+        setFormData(initialValues);
+    }, [initialValues]);
+
+    const handleChange = (event) => {
+        const { name, value, type } = event.target;
+
+        setFormData((previousData) => ({
+            ...previousData,
+            [name]: type === 'number' ? Number(value) : value
+        }));
+    };
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        onSubmit(formData);
+    };
+
+    const handleApplyPreset = (preset) => {
+        if (!preset || !preset.data) {
+            return;
+        }
+
+        setFormData((previousData) => ({
+            ...previousData,
+            ...preset.data
+        }));
+    };
+
+    const handleReset = () => {
+        setFormData(initialValues);
+    };
+
+    const renderField = (field) => {
+        if (field.type === 'select') {
+            return (
+                <select name={field.name} value={formData[field.name]} onChange={handleChange} required={field.required}>
+                    {field.options.map((option) => {
+                        const normalizedOption = typeof option === 'string' ? { label: option, value: option } : option;
+
+                        return (
+                            <option key={normalizedOption.value} value={normalizedOption.value}>
+                                {normalizedOption.label}
+                            </option>
+                        );
+                    })}
+                </select>
+            );
+        }
+
+        if (field.type === 'radio') {
+            return (
+                <div className="radio-group">
+                    {field.options.map((option) => {
+                        const normalizedOption = typeof option === 'string' ? { label: option, value: option } : option;
+
+                        return (
+                            <label key={normalizedOption.value}>
+                                <input
+                                    type="radio"
+                                    name={field.name}
+                                    value={normalizedOption.value}
+                                    checked={formData[field.name] === normalizedOption.value}
+                                    onChange={handleChange}
+                                />
+                                <span>{normalizedOption.label}</span>
+                            </label>
+                        );
+                    })}
+                </div>
+            );
+        }
+
+        if (field.type === 'textarea') {
+            return (
+                <textarea
+                    name={field.name}
+                    value={formData[field.name]}
+                    onChange={handleChange}
+                    rows={field.rows ?? 4}
+                    required={field.required}
+                    placeholder={field.placeholder}
+                />
+            );
+        }
+
+        return (
+            <input
+                type={field.type}
+                name={field.name}
+                value={formData[field.name]}
+                onChange={handleChange}
+                required={field.required}
+                min={field.min}
+                max={field.max}
+                step={field.step}
+                placeholder={field.placeholder}
+            />
+        );
+    };
+
+    return (
+        <section className="form-shell">
+            <h3>{system.title} Form</h3>
+            <p>Each module has independent fields, pricing logic, and output summary.</p>
+
+            <div className="form-actions-bar">
+                <div className="preset-list">
+                    {presets.map((preset) => (
+                        <button
+                            type="button"
+                            key={preset.label}
+                            className="preset-btn"
+                            onClick={() => handleApplyPreset(preset)}
+                        >
+                            {preset.label}
+                        </button>
+                    ))}
+                </div>
+
+                <button type="button" className="secondary-btn" onClick={handleReset}>
+                    Reset Form
+                </button>
+            </div>
+
+            <form className="dynamic-form" onSubmit={handleSubmit}>
+                <div className="form-grid">
+                    {system.fields.map((field) => (
+                        <div className={`field-group ${field.fullWidth ? 'full-width' : ''}`} key={field.name}>
+                            <label>{field.label}</label>
+                            {renderField(field)}
+                        </div>
+                    ))}
+                </div>
+
+                <button type="submit" className="primary-btn">
+                    Generate {system.title}
+                </button>
+            </form>
+        </section>
+    );
+}
+
+export default DynamicSystemForm;

package/components/system/SystemHero.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+function SystemHero({ system }) {
+    return (
+        <section className="system-hero">
+            <div>
+                <p className="hero-kicker">Template Workspace</p>
+                <h2>{system.title}</h2>
+                <p>{system.uiStyle}</p>
+            </div>
+
+            <div className="hero-tags">
+                {system.highlights.map((highlight) => (
+                    <span key={highlight}>{highlight}</span>
+                ))}
+            </div>
+        </section>
+    );
+}
+
+export default SystemHero;

package/components/system/SystemSummaryCard.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { formatCurrency } from '../../utils/systemEngine';
+
+function SystemSummaryCard({ system, record }) {
+    const submittedTime = new Date(record.submittedAt);
+    const displayTime = Number.isNaN(submittedTime.valueOf())
+        ? 'Recently submitted'
+        : submittedTime.toLocaleString();
+
+    return (
+        <section className="summary-shell">
+            <div className="summary-head">
+                <h3>{system.title} Summary</h3>
+                <span>{displayTime}</span>
+            </div>
+
+            <ul className="summary-grid">
+                {record.summaryRows.map((row) => (
+                    <li key={row.label}>
+                        <small>{row.label}</small>
+                        <strong>{row.value}</strong>
+                    </li>
+                ))}
+            </ul>
+
+            <div className="price-board">
+                <div>
+                    <span>{record.pricing.quantityLabel}</span>
+                    <strong>{record.pricing.quantity}</strong>
+                </div>
+                <div>
+                    <span>Unit Price</span>
+                    <strong>{formatCurrency(record.pricing.unitPrice, record.pricing.currency)}</strong>
+                </div>
+                <div>
+                    <span>Subtotal</span>
+                    <strong>{formatCurrency(record.pricing.subtotal, record.pricing.currency)}</strong>
+                </div>
+                <div>
+                    <span>Service Fee</span>
+                    <strong>{formatCurrency(record.pricing.fee, record.pricing.currency)}</strong>
+                </div>
+            </div>
+
+            <div className="grand-total">
+                <span>{record.pricing.chargeLabel}</span>
+                <h4>{formatCurrency(record.pricing.total, record.pricing.currency)}</h4>
+            </div>
+        </section>
+    );
+}
+
+export default SystemSummaryCard;