popsite-ui 1.0.0

package/components/modules/SystemVisualWidget.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+const seatRows = ['A', 'B', 'C', 'D', 'E', 'F'];
+const seatCols = [1, 2, 3, 4, 5, 6, 7, 8];
+
+function SeatMapWidget({ title, occupiedSeats = [] }) {
+    return (
+        <article className="visual-widget">
+            <div className="visual-head">
+                <h4>{title || 'Seat Map'}</h4>
+                <span>{occupiedSeats.length} occupied</span>
+            </div>
+            <div className="seat-map-grid">
+                {seatRows.map((row) => (
+                    <div className="seat-row" key={row}>
+                        <small>{row}</small>
+                        <div className="seat-row-cells">
+                            {seatCols.map((col) => {
+                                const seatId = `${row}${col}`;
+                                const occupied = occupiedSeats.includes(seatId);
+
+                                return (
+                                    <span key={seatId} className={`seat-cell ${occupied ? 'occupied' : 'available'}`}>
+                                        {seatId}
+                                    </span>
+                                );
+                            })}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </article>
+    );
+}
+
+function RouteTimelineWidget({ title, points = [] }) {
+    return (
+        <article className="visual-widget">
+            <div className="visual-head">
+                <h4>{title || 'Route Timeline'}</h4>
+                <span>{points.length} points</span>
+            </div>
+            <div className="route-timeline">
+                {points.map((point, index) => (
+                    <div key={`${point}-${index}`} className="route-point">
+                        <span className="route-dot" />
+                        <p>{point}</p>
+                    </div>
+                ))}
+            </div>
+        </article>
+    );
+}
+
+function OccupancyMeterWidget({ title, percentage = 0 }) {
+    const safePercentage = Math.max(0, Math.min(100, Number(percentage) || 0));
+
+    return (
+        <article className="visual-widget">
+            <div className="visual-head">
+                <h4>{title || 'Occupancy Meter'}</h4>
+                <span>{safePercentage}%</span>
+            </div>
+            <div className="meter-track">
+                <span className="meter-fill" style={{ width: `${safePercentage}%` }} />
+            </div>
+            <p className="meter-note">Real-time occupancy against available operational capacity.</p>
+        </article>
+    );
+}
+
+function KpiSparkCardsWidget({ title, cards = [] }) {
+    return (
+        <article className="visual-widget">
+            <div className="visual-head">
+                <h4>{title || 'KPI Spark Cards'}</h4>
+                <span>{cards.length} KPIs</span>
+            </div>
+            <div className="kpi-spark-grid">
+                {cards.map((card) => {
+                    const maxTrend = Math.max(...card.trend, 1);
+
+                    return (
+                        <div className="kpi-card" key={card.label}>
+                            <small>{card.label}</small>
+                            <strong>{card.value}</strong>
+                            <div className="spark-bars">
+                                {card.trend.map((point, index) => (
+                                    <span
+                                        key={`${card.label}-${index}`}
+                                        style={{ height: `${Math.max(12, Math.round((point / maxTrend) * 38))}px` }}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </article>
+    );
+}
+
+function SystemVisualWidget({ widget }) {
+    if (!widget || !widget.type) {
+        return null;
+    }
+
+    if (widget.type === 'seat-map') {
+        return <SeatMapWidget title={widget.title} occupiedSeats={widget.occupiedSeats} />;
+    }
+
+    if (widget.type === 'route-timeline') {
+        return <RouteTimelineWidget title={widget.title} points={widget.points} />;
+    }
+
+    if (widget.type === 'occupancy-meter') {
+        return <OccupancyMeterWidget title={widget.title} percentage={widget.percentage} />;
+    }
+
+    return <KpiSparkCardsWidget title={widget.title} cards={widget.cards || []} />;
+}
+
+export default SystemVisualWidget;

package/components/modules/moduleContentMap.js

@@ -0,0 +1,238 @@
+const moduleContentMap = {
+    'movie-booking': {
+        overview: 'Supports multiplex operations with show scheduling, seat category pricing, and high-conversion booking confirmation.',
+        quickStats: [
+            { label: 'Peak Throughput', value: '2.1k bookings/hr' },
+            { label: 'Average Checkout Time', value: '36 sec' },
+            { label: 'Seat Utilization Target', value: '87%' }
+        ],
+        workflowSteps: [
+            'Select title, date, and show slot',
+            'Apply seat category and seat count',
+            'Generate pricing and confirmation summary'
+        ],
+        policyNotes: [
+            'Seat inventory should sync every 30 seconds with POS.',
+            'Recliner tier has dynamic pricing for weekend prime slots.',
+            'Cancellations allowed up to 20 minutes before show time.'
+        ]
+    },
+    'flight-booking': {
+        overview: 'Designed for airline reservation workflows with route selection, fare class management, and passenger billing.',
+        quickStats: [
+            { label: 'Routes Configured', value: '120+' },
+            { label: 'Fare Repricing Window', value: '15 min' },
+            { label: 'Average Ticket Value', value: '$420' }
+        ],
+        workflowSteps: [
+            'Select origin, destination, and travel date',
+            'Configure passenger count and cabin class',
+            'Generate itinerary pricing summary'
+        ],
+        policyNotes: [
+            'Business and First class include priority service fee.',
+            'Name corrections allowed within 24 hours of booking.',
+            'Publish fare updates to all channels every 5 minutes.'
+        ]
+    },
+    'hotel-booking': {
+        overview: 'Built for property booking operations with room inventory classes, stay duration pricing, and guest management.',
+        quickStats: [
+            { label: 'Rooms Managed', value: '480' },
+            { label: 'Avg Stay Length', value: '2.8 nights' },
+            { label: 'Occupancy Goal', value: '82%' }
+        ],
+        workflowSteps: [
+            'Capture guest profile and city selection',
+            'Select room type, nights, and guest count',
+            'Generate reservation pricing breakdown'
+        ],
+        policyNotes: [
+            'Suite category includes concierge package fee.',
+            'Early check-in is request based and property dependent.',
+            'Booking modifications lock 6 hours before check-in.'
+        ]
+    },
+    'event-ticket-booking': {
+        overview: 'Supports event operations with access-zone tiers, attendee notes, and flexible pass allocation logic.',
+        quickStats: [
+            { label: 'Events Supported', value: '65 per month' },
+            { label: 'VIP Conversion', value: '24%' },
+            { label: 'Avg Pass Bundle', value: '3.2 passes' }
+        ],
+        workflowSteps: [
+            'Select event profile and event date',
+            'Assign pass count and zone category',
+            'Generate attendee and billing summary'
+        ],
+        policyNotes: [
+            'Backstage zone requires manual organizer approval.',
+            'Digital pass QR generation happens post payment.',
+            'Special notes are visible to venue operations.'
+        ]
+    },
+    'food-ordering': {
+        overview: 'Optimized for food delivery teams with order-item scaling, delivery SLA modes, and quick checkout totals.',
+        quickStats: [
+            { label: 'Orders per Day', value: '11k+' },
+            { label: 'Median Delivery SLA', value: '32 min' },
+            { label: 'Repeat Rate', value: '41%' }
+        ],
+        workflowSteps: [
+            'Select restaurant and delivery schedule',
+            'Choose item count and delivery type',
+            'Generate customer order and amount summary'
+        ],
+        policyNotes: [
+            'Priority orders are auto-routed to nearest kitchen hub.',
+            'Express mode includes surge multiplier during peak hours.',
+            'Order holds expire if checkout is inactive for 7 minutes.'
+        ]
+    },
+    'ecommerce-store': {
+        overview: 'Supports catalog commerce operations with quantity-based pricing, delivery plans, and checkout detail capture.',
+        quickStats: [
+            { label: 'SKUs Listed', value: '95k' },
+            { label: 'Cart to Order Rate', value: '14.7%' },
+            { label: 'Avg Order Value', value: '$73' }
+        ],
+        workflowSteps: [
+            'Capture customer and product category',
+            'Select quantity and delivery plan',
+            'Generate checkout total with service fees'
+        ],
+        policyNotes: [
+            'Same day option is restricted by fulfillment zone.',
+            'Prime plans receive shipping fee concessions.',
+            'Address notes are mandatory for high-value shipments.'
+        ]
+    },
+    'library-management': {
+        overview: 'Built for academic and enterprise libraries with issue duration handling, membership classes, and service fees.',
+        quickStats: [
+            { label: 'Active Members', value: '8,400' },
+            { label: 'Daily Issues', value: '630' },
+            { label: 'On-time Returns', value: '89%' }
+        ],
+        workflowSteps: [
+            'Capture librarian and member context',
+            'Assign book category and borrow duration',
+            'Generate issue summary with service amount'
+        ],
+        policyNotes: [
+            'Scholar membership offers reduced daily service rates.',
+            'Borrow period extension requires librarian approval.',
+            'Penalty policy applies after grace period expiry.'
+        ]
+    },
+    'student-registration': {
+        overview: 'Covers university intake operations including program registration, semester-wise fees, and student profile validation.',
+        quickStats: [
+            { label: 'Registrations per Intake', value: '5,200' },
+            { label: 'Completion Rate', value: '92%' },
+            { label: 'Avg Processing Time', value: '4.5 min' }
+        ],
+        workflowSteps: [
+            'Capture student identity and contact profile',
+            'Assign course, semester, and registration type',
+            'Generate enrollment charge summary'
+        ],
+        policyNotes: [
+            'International applications require additional verification.',
+            'Semester fee slabs vary by program group.',
+            'Profiles remain editable until enrollment lock date.'
+        ]
+    },
+    'hospital-appointment': {
+        overview: 'Designed for healthcare scheduling with department routing, consultation modes, and appointment pricing controls.',
+        quickStats: [
+            { label: 'Appointments per Day', value: '1,350' },
+            { label: 'Telehealth Share', value: '27%' },
+            { label: 'Avg Wait Time', value: '18 min' }
+        ],
+        workflowSteps: [
+            'Capture patient and department details',
+            'Select appointment date, slots, and mode',
+            'Generate consultation billing summary'
+        ],
+        policyNotes: [
+            'Priority mode reserves dedicated physician slots.',
+            'Symptoms notes are shared only with assigned clinicians.',
+            'No-show policy applies after 10-minute grace window.'
+        ]
+    },
+    'invoice-billing': {
+        overview: 'Supports financial operations with billable unit computation, plan-based rates, and invoice-ready summaries.',
+        quickStats: [
+            { label: 'Invoices per Month', value: '3,900' },
+            { label: 'Collection Rate', value: '94%' },
+            { label: 'Average Invoice Size', value: '$1,280' }
+        ],
+        workflowSteps: [
+            'Capture client and service type',
+            'Assign billing plan and billable units',
+            'Generate invoice total with service fee'
+        ],
+        policyNotes: [
+            'Retainer plans are reconciled at month-end cycles.',
+            'Project billing can include milestone surcharge.',
+            'Invoices are immutable after accounting approval.'
+        ]
+    },
+    'chat-messaging': {
+        overview: 'Built for communication suite onboarding with user-seat scaling, plan tiers, and support window setup.',
+        quickStats: [
+            { label: 'Messages per Day', value: '4.8M' },
+            { label: 'Avg Session Duration', value: '21 min' },
+            { label: 'Enterprise Adoption', value: '38%' }
+        ],
+        workflowSteps: [
+            'Capture workspace and ownership details',
+            'Configure seat count and support windows',
+            'Generate subscription pricing summary'
+        ],
+        policyNotes: [
+            'Enterprise plans include audit and retention controls.',
+            '24x7 support is available only on Business and above.',
+            'Seat changes are prorated in the next billing cycle.'
+        ]
+    },
+    'analytics-dashboard': {
+        overview: 'Supports analytics platform setup with source scaling, refresh windows, and analyst seat planning.',
+        quickStats: [
+            { label: 'Pipelines Monitored', value: '1,100+' },
+            { label: 'Dashboard Refresh SLA', value: '99.9%' },
+            { label: 'Avg Active Analysts', value: '64' }
+        ],
+        workflowSteps: [
+            'Define dashboard type and source volume',
+            'Configure refresh cadence and seat count',
+            'Generate platform usage and pricing summary'
+        ],
+        policyNotes: [
+            'Hourly refresh requires Pro tier or above.',
+            'Elite plan enables higher source connection caps.',
+            'Data source onboarding includes schema validation checks.'
+        ]
+    },
+    'quiz-exam': {
+        overview: 'Created for digital assessment operations with candidate volume planning, exam modes, and pricing outputs.',
+        quickStats: [
+            { label: 'Exams Conducted', value: '860 per term' },
+            { label: 'Candidate Capacity', value: '2,000 per exam' },
+            { label: 'Proctored Adoption', value: '56%' }
+        ],
+        workflowSteps: [
+            'Configure exam identity and schedule',
+            'Set question count, candidate volume, and mode',
+            'Generate exam delivery cost summary'
+        ],
+        policyNotes: [
+            'Certification mode enforces stricter identity checks.',
+            'Question bank versioning is mandatory for compliance.',
+            'Late join policy can be enabled per exam mode.'
+        ]
+    }
+};
+
+export default moduleContentMap;