e.stopPropagation()} className="absolute right-0 top-11 w-40 bg-white rounded-xl shadow-lg border border-neutral-100 py-1 z-20">
);
}
function WelcomeCanvas() {
return (
setDetail(null)} />}
);
}
function StatCardF({ label, value, sub }) {
return (
{label}
{value}
{sub &&
{sub}
}
);
}
const RESPONSE_ANSWERS = [
{ type: 'Short text', answer: 'Lorem ipsum' },
{ type: 'Long text', answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,' },
{ type: 'Multiple choice', options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'] },
{ type: 'File upload', file: 'example.png' },
{ type: 'Rating', rating: 3 },
{ type: 'Long text', answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,' },
{ type: 'Long text', answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,' },
{ type: 'Short text', answer: 'Lorem ipsum' },
];
function ResponseDetailDrawer({ email, onClose }) {
useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, []);
return (
e.stopPropagation()}
className="w-full max-w-[440px] h-full bg-white shadow-2xl overflow-y-auto animate-[slideInRight_.22s_ease_both]">
{typeof email === 'string' ? email : 'name@example.com'}
Submitted 1 Apr 2026 20:08
{RESPONSE_ANSWERS.map((q, i) => (
Question {i + 1}
{q.type}
{q.answer &&
{q.answer}
}
{q.options && (
{q.options.map(o => {o} )}
)}
{q.file &&
{q.file} }
{q.rating != null && (
{Array.from({ length: q.rating }, (_, k) =>
)}
))}
);
}
function ResponsesView() {
return (
);
}
/* =================================================================
FORM SETTINGS
================================================================= */
function FormSettingsPage() {
return (
Integrations
Save time and effort with these integrations for Typeform
Coupons
Manage post-completion rewards
);
}
/* =================================================================
USER FORM VIEW (recipient-facing)
================================================================= */
function UserFormViewPage({ slug = 'my-new-form', page = 'welcome' }) {
return (
Pages
{[
{ id: 'welcome', label: 'Welcome screen' },
{ id: 'basic', label: 'Basic info' },
{ id: 'survey', label: 'YSEALI Summit 2024 and Y…' },
].map(p => (
{p.label}
))}
{page === 'welcome' &&
);
}
function UserFormWelcome() {
return (
<>
Pre-Summit Program Survey
Hi there! Please take a moment of your time to fill this survey up so that it helps us tailor the YSEALI Next ESC program at the upcoming YSEALI Summit 2024 in Luang Prabang, Laos.
Start
);
}
function UserFormBasic() {
return (
<>
BASIC INFO
Tell us about yourself!
YSEALI SUMMIT 2024 AND YSEALI NEXT ESC PROFESSIONAL & PERSONEL DEVELOPMENT SE
1
What are you hoping to gain from the Summit and the YSEALI Next ESC Professional & Personal Development Series?
Choose as many as you like.
Back
Continue
);
}
/* =================================================================
DESIGN PANEL — standalone showcase
================================================================= */
function DesignPanelPage() {
return (
Design panel
Floating panel used inside the form builder for branding.
);
}
function DesignPanelCard({ tab }) {
return (
{[
{ v: 'logo', l: 'Logo' },
{ v: 'button', l: 'Button' },
{ v: 'background', l: 'Background' },
].map(t => (
{t.l}
))}
{tab === 'logo' &&
}
{tab === 'button' &&
}
{tab === 'background' &&
}
Revert
Save Changes
);
}
function LogoPanel() {
return (
<>
Logo
JPG, PNG or GIF. Up to 4mb.
Size
{[
{ v: 'small', l: 'Small', c: true },
{ v: 'medium', l: 'Medium' },
{ v: 'large', l: 'Large' },
].map(s => (
{s.c &&
{s.l}
))}
Alignment
{[
{ c: true, ic: '|≡' },
{ c: false, ic: '≡|' },
{ c: false, ic: '|≡|' },
].map((a, i) => (
{a.c &&
{a.ic}
))}
);
}
const SWATCHES = ['#000', '#1F6FEB', '#22C55E', '#FBBF24', '#EF4444', '#1F2937', '#9CA3AF'];
function ColorRow() {
return (
);
}
function HexInput({ value = '#000000' }) {
return (
);
}
function ButtonPanel() {
return (
<>
Button color
Button text color
Answer color
Color
Upload image
JPG, PNG or GIF. Up to 4mb.
);
}
/* ===== Booking Details full page ===== */
function BookingDetailsPage({ id = 'b1' }) {
const g = (typeof BOOKING_ATTENDEES !== 'undefined' && BOOKING_ATTENDEES.find(a => a.id === id)) || { name: 'Mathialagi', email: 'kmathialagi@gmail.com', contact: '+60175578162', tickets: '1x' };
const link = 'https://biji-biji.zoom.us/j/82301144216';
return (
history.back()} className="w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center text-neutral-700 hover:bg-neutral-50">
Booking Details
Jul 18, 2026, 9:00 AM - 5:00 PM (MYT) | Confirmation Code: 0MOXUB9DZbaXlZmclSAG
| Host: Amyra Efasyafiqa Binti Lismawira Amraf
Link to Online Experience: {link}
Guests & Tickets
{g.tickets || '1x'} Get AI Ready!
{g.name}
{g.email} | {g.contact}
Payment Breakdown
Status: FREE
{[['1 x Get AI Ready!', 'Price per Get AI Ready!', 'FREE'], ['Service Fee (Paid by User)', '', 'FREE']].map((r, i) => (
))}
Total FREE
);
}
Object.assign(window, {
UserOverviewPageV2,
ManageFormsPage, FormSettingsPage,
FormBuilderContentPage, FormBuilderConnectPage, FormBuilderSharePage, FormBuilderResultsPage,
UserFormViewPage, DesignPanelPage,
MyCoursesDashPage, MyPurchasesDashPage, MyProgrammesDashPage, MyGigsDashPage,
MyExperiencesDashPage, MyExpertiseDashPage,
ManageCommunicationsDashPage, AnalyticsDashPage,
ManageListingsDashPage, ManageGigsDashPage, ManageProgramsDashPage, BookingDetailsPage,
PostListingPage,
DashShell, DashHeader, Pagination,
});
/* ===== Post Listing (type picker) ===== */
const LISTING_TYPES = [
{
id: 'experience',
title: 'Experience',
icon: (
),
desc: 'Host a virtual or physical Experience and share your passion with thousands of Learners!',
to: '/app/onboarding/experience/select-type',
},
{
id: 'expertise',
title: 'Expertise',
icon: (
),
desc: 'Allow users to sign up for one on one sessions with you, to share your knowledge with the world!',
to: '/app/onboarding/expertise/brief',
},
{
id: 'gigs',
title: 'Gigs',
icon: (
),
desc: 'Post short-term work, projects or contracts and connect with vetted Experts to get them done.',
to: '/app/onboarding/job/details',
},
{
id: 'courses',
title: 'Courses',
icon: (
),
desc: 'Build a self-paced course with lessons, quizzes and certificates that learners can complete on their own time.',
to: '/app/forms/builder/new/content',
},
];
function PostListingPage() {
return (
{LISTING_TYPES.map(t => (
{t.icon}
{t.title}
{t.desc}
Get started
))}
);
}
/* =================================================================
DASH-SHELL VERSIONS OF SIDEBAR-LINKED PAGES
================================================================= */
function DashHeader({ title, subtitle, action }) {
return (
{title}
{subtitle &&
{subtitle}
}
{action}
);
}
/* ===== My Gigs (personal job applications) ===== */
function MyGigsDashPage() {
const [tab, setTab] = useState('Proposed');
const proposed = [
{ id: 'AP-318', job: 'Brand Identity for D2C Skincare Launch', client: 'Lumi Botanicals', bid: 'RM 8,500', status: 'Shortlisted', date: 'Submitted May 16' },
{ id: 'AP-312', job: 'Investor Deck — Series A', client: 'Stealth (FoodTech)', bid: 'RM 4,200', status: 'Under review', date: 'Submitted May 12' },
{ id: 'AP-305', job: 'Frontend Developer (Angular)', client: 'Hauz Capital', bid: 'RM 120 / hr', status: 'Interview', date: 'Submitted May 9' },
];
const contracted = [
{ id: 'CT-088', job: 'Video Producer — Docu-Series', client: 'Yayasan Hijau', bid: 'RM 12,000', status: 'In progress', date: 'Started Apr 28' },
{ id: 'CT-081', job: 'Growth Consultant Retainer', client: 'Tumbuh App', bid: 'RM 6,000 / mo', status: 'Completed', date: 'Ended Mar 30' },
];
const tone = { Shortlisted: 'info', 'Under review': 'warning', Interview: 'purple', 'In progress': 'success', Completed: 'neutral' };
const rows = tab === 'Proposed' ? proposed : contracted;
return (
Browse jobs }
/>
{['Contracted', 'Proposed'].map(t => (
setTab(t)}
className={`px-4 h-9 rounded-full text-sm font-medium transition-colors ${tab === t ? 'bg-neutral-900 text-white' : 'bg-white border border-neutral-200 text-neutral-700 hover:bg-neutral-50'}`}>
{t}
))}
{rows.length === 0 ? (
Let's get started!
You haven't sent any proposals or been contracted yet. Take a look at gigs that match your skills and start applying.
Browse jobs
) : (
{rows.map(r => (
{r.status}
{r.id}
{r.job}
{r.client} · {r.date}
{r.bid}
{tab === 'Proposed' ? 'your bid' : 'contract value'}
View
))}
);
}
/* ===== My Programmes ===== */
/* Shared dashboard filter chips + "For You" recommendations — Figma 5289-48033/48538/48720/48884 */
function DashChips({ chips, value, onChange }) {
const [a, setA] = useState(chips[0]);
const active = value !== undefined ? value : a;
const pick = onChange || setA;
return (
{chips.map(c => (
pick(c)}
className={`px-4 h-9 rounded-full text-[13px] font-medium border transition-colors ${active === c ? 'bg-neutral-900 text-white border-neutral-900' : 'bg-white text-neutral-600 border-neutral-200 hover:bg-neutral-50'}`}>
{c}
))}
);
}
/* status vs chip matcher: "All*" = everything, "Completed" = completed only, else = not completed */
function matchChip(status, chip) {
if (!chip || chip.indexOf('All') === 0) return true;
if (chip === 'Completed') return status === 'Completed';
return status !== 'Completed';
}
/* Reusable search + sort toolbar for dashboard list pages */
function DashToolbar({ q, setQ, sort, setSort, sorts, placeholder }) {
return (
{sorts && (
setSort(e.target.value)}
className="h-10 px-3 rounded-full border border-neutral-200 bg-white text-sm text-neutral-800">
{sorts.map(o => Sort: {o} )}
)}
);
}
function DashNoResults({ label = 'results' }) {
return (
No {label} found
Try a different search or filter.
);
}
const FOR_YOU_RECS = [
{ tag: 'Programme', title: 'AI Fluency by Microsoft', meta: 'Mereka • 7 modules', price: '$49 / month', hue: 290 },
{ tag: 'Course', title: 'Microsoft Copilot for Beginners', meta: 'Mereka • 12 lessons', price: 'FREE', hue: 25 },
{ tag: 'Expertise', title: 'Boosting Sales and Productivity', meta: 'Studio Kuala', price: 'from RM 8,500', hue: 210 },
];
function ForYouGrid({ title = 'For You' }) {
return (
{title}
{FOR_YOU_RECS.map((r, i) => (
{r.tag}
{r.title}
{r.meta}
{r.price}
View
))}
);
}
function MyProgrammesDashPage() {
const programmes = [
{ t: 'AI Fundamentals for Teams', hub: 'Mereka Programs', meta: 'Module 1 of 6 · Intro to LLMs', p: 8, status: 'In progress', cta: 'Continue', cert: true, hue: 290, owner: 'Mereka Programs', focus: ['Applied AI', 'Teams'], duration: '6 weeks', cohorts: 3, enrolled: 420, rating: 4.6 },
{ t: 'Mereka Career Accelerator', hub: 'Biji-biji Initiative', meta: 'Module 4 of 8 · Personal branding', p: 52, status: 'In progress', cta: 'Continue', cert: true, hue: 25, owner: 'Biji-biji Initiative', focus: ['Career', 'Employability'], duration: '8 weeks', cohorts: 5, enrolled: 890, rating: 4.7 },
{ t: 'Dynamous AI Mastery', hub: 'Biji-biji Initiative', meta: 'Completed · Certificate issued', p: 100, status: 'Completed', cta: 'View certificate', cert: true, hue: 220, owner: 'Biji-biji Initiative', focus: ['Finance', 'Automation'], duration: '8 weeks', cohorts: 4, enrolled: 640, rating: 4.8 },
{ t: 'Design Leadership Program', hub: 'Studio Kuala', meta: 'Not started · 10 modules', p: 0, status: 'Enrolled', cta: 'Start learning', cert: true, hue: 160, owner: 'Studio Kuala', focus: ['Design', 'Leadership'], duration: '10 weeks', cohorts: 2, enrolled: 210, rating: 4.5 },
];
const goProg = (p) => setProg({ name: p.t, owner: p.owner, focus: p.focus, status: p.status, duration: p.duration, cohorts: p.cohorts, enrolled: p.enrolled, completion: p.p, rating: p.rating });
const [q, setQ] = useState(''); const [chip, setChip] = useState('All Programmes'); const [sort, setSort] = useState('Default');
let view = programmes.filter(p => matchChip(p.status, chip) && (q === '' || (p.t + ' ' + p.hub).toLowerCase().includes(q.toLowerCase())));
if (sort === 'Progress') view = [...view].sort((a, b) => b.p - a.p);
else if (sort === 'Name A–Z') view = [...view].sort((a, b) => a.t.localeCompare(b.t));
const tone = { 'In progress': 'bg-blue-50 text-blue-600', Completed: 'bg-green-50 text-green-600', Enrolled: 'bg-neutral-100 text-neutral-500' };
return (
Browse programmes }
/>
{view.map((p, i) => (
{p.status}
{p.cert &&
goProg(p)}>
{p.t}
{p.hub}
{p.meta}
{p.p}%
goProg(p)}>
{p.cta}
))}
);
}
/* ===== My Courses ===== */
function MyCoursesDashPage() {
const courses = [
{ t: 'Brand Identity Sprint', hub: 'Studio Kuala', mod: 'Module 3 of 6 · Positioning', p: 48, hue: 275 },
{ t: 'Digital Illustration Bootcamp', hub: 'Pixel House', mod: 'Lesson 5 of 18 · Colour theory', p: 28, hue: 220 },
{ t: 'Sustainable Cooking Masterclass', hub: 'Chef Aisyah Lim', mod: 'Lesson 2 of 8 · Sourcing', p: 12, hue: 140 },
{ t: 'AI Fundamentals for Teams', hub: 'Mereka Programs', mod: 'Week 1 of 6 · Intro to LLMs', p: 8, hue: 290 },
];
const [q, setQ] = useState(''); const [chip, setChip] = useState('All Courses'); const [sort, setSort] = useState('Default');
let view = courses.filter(c => matchChip(c.p >= 100 ? 'Completed' : 'In progress', chip) && (q === '' || (c.t + ' ' + c.hub).toLowerCase().includes(q.toLowerCase())));
if (sort === 'Progress') view = [...view].sort((a, b) => b.p - a.p);
else if (sort === 'Name A–Z') view = [...view].sort((a, b) => a.t.localeCompare(b.t));
return (
Browse catalog }
/>
{view.map((c, i) => (
{c.t}
{c.hub}
{c.mod}
{c.p}%
Continue learning
))}
);
}
/* ===== My Experiences ===== */
function MyExperiencesDashPage() {
const experiences = [
{ t: 'Traditional Batik Painting Workshop', slug: 'kuala-lumpur-batik-workshop', hub: 'Kraf KL Studio', meta: '25 May 2026 · 3:00 PM', loc: 'Bangsar, Kuala Lumpur', status: 'Upcoming', cta: 'View details', hue: 25 },
{ t: 'Pottery Wheel Throwing for Beginners', slug: 'pottery-wheel-throwing', hub: 'Tanah Liat Studio', meta: '02 Jun 2026 · 10:00 AM', loc: 'Subang Jaya', status: 'Upcoming', cta: 'View details', hue: 30 },
{ t: 'Tropical Garden Walking Tour', slug: 'tropical-garden-tour', hub: 'Greenhaus Hub', meta: '18 Apr 2026 · 9:00 AM', loc: 'Genting Highlands', status: 'Completed', cta: 'View details', hue: 170 },
{ t: 'Sourdough Bread Baking Class', slug: 'sourdough-bread-class', hub: 'Mill & Crust', meta: '10 Mar 2026 · 2:00 PM', loc: 'Damansara', status: 'Completed', cta: 'View details', hue: 35 },
];
const tone = { Upcoming: 'bg-blue-50 text-blue-600', Completed: 'bg-neutral-100 text-neutral-500' };
const [q, setQ] = useState(''); const [chip, setChip] = useState('All'); const [sort, setSort] = useState('Default');
let view = experiences.filter(e => matchChip(e.status, chip) && (q === '' || (e.t + ' ' + e.hub + ' ' + e.loc).toLowerCase().includes(q.toLowerCase())));
if (sort === 'Name A–Z') view = [...view].sort((a, b) => a.t.localeCompare(b.t));
return (
Browse experiences }
/>
{view.map((e, i) => (
))}
);
}
/* ===== My Expertise ===== */
function MyExpertiseDashPage() {
const expertise = [
{ t: 'Brand Identity Sprint — 2 weeks', slug: 'brand-identity-sprint', expert: 'Studio Kuala', meta: 'Online + 1 in-person · 2 weeks', when: '28 May 2026 · 4:00 PM', status: 'Upcoming', cta: 'View details', hue: 275 },
{ t: 'UX Audit & Roadmap', slug: 'ux-audit-roadmap', expert: 'Pixel House', meta: 'Remote · 1–2 weeks', when: '05 Jun 2026 · 11:00 AM', status: 'Scheduled', cta: 'View details', hue: 220 },
{ t: 'Content Engine Playbook', slug: 'content-engine-playbook', expert: 'Frame & Field', meta: 'Online · 3 weeks', when: '12 Apr 2026', status: 'Completed', cta: 'View details', hue: 340 },
{ t: 'Growth Diagnostic + Plan', slug: 'growth-diagnostic-plan', expert: 'Loop Growth', meta: 'Remote · 2 weeks', when: '02 Mar 2026', status: 'Completed', cta: 'View details', hue: 290 },
];
const tone = { Upcoming: 'bg-green-50 text-green-600', Scheduled: 'bg-blue-50 text-blue-600', Completed: 'bg-neutral-100 text-neutral-500' };
const [q, setQ] = useState(''); const [chip, setChip] = useState('All'); const [sort, setSort] = useState('Default');
let view = expertise.filter(e => matchChip(e.status, chip) && (q === '' || (e.t + ' ' + e.expert).toLowerCase().includes(q.toLowerCase())));
if (sort === 'Name A–Z') view = [...view].sort((a, b) => a.t.localeCompare(b.t));
return (
Find experts }
/>
{view.map((e, i) => (
{e.t}
by {e.expert}
{e.cta}
))}
);
}
/* ===== My Purchases ===== */
function MyPurchasesDashPage() {
const [tab, setTab] = useState('All');
const purchases = [
{ id: 'P-2851', desc: 'UX Audit session — Rafael Tan', date: 'May 18, 2026', amt: 'RM 420.00', kind: 'Booking', status: 'Paid' },
{ id: 'P-2812', desc: 'Sourdough Bread Class', date: 'May 14, 2026', amt: 'RM 210.00', kind: 'Booking', status: 'Paid' },
{ id: 'P-2790', desc: 'Brand Identity Sprint — Milestone 1', date: 'May 8, 2026', amt: 'RM 2,800.00', kind: 'Milestone', status: 'Paid' },
{ id: 'P-2772', desc: 'AI Fundamentals — Program enrolment', date: 'May 1, 2026', amt: 'RM 1,200.00', kind: 'Program', status: 'Paid' },
{ id: 'P-2733', desc: 'Pottery refund', date: 'Apr 28, 2026', amt: '-RM 150.00', kind: 'Refund', status: 'Refunded' },
];
const filtered = tab === 'All' ? purchases : purchases.filter(p => p.kind === tab);
return (
{['All', 'Booking', 'Program', 'Milestone', 'Refund'].map(f => (
setTab(f)}
className={`px-4 h-8 rounded-full text-sm transition-colors ${tab === f ? 'bg-neutral-900 text-white font-semibold' : 'bg-white border border-neutral-200 text-neutral-700 hover:bg-neutral-50'}`}>
{f}
))}
Reference
Description
Date
Type
Amount
Status
{filtered.length === 0 ? (
No purchases match this filter.
{p.id}
{p.desc}
{p.date}
{p.kind} {p.amt}
{p.status}
))}
);
}
/* ===== Manage Communications ===== */
function ManageCommunicationsDashPage() {
const [ch, setCh] = useState('All');
const [search, setSearch] = useState('');
const logs = [
{ id: 'C-9012', ch: 'Email', sub: 'Your sourdough class is confirmed', to: 'faiz.fadhillah@example.com', date: 'May 18 12:42 PM', status: 'Delivered' },
{ id: 'C-9011', ch: 'WhatsApp', sub: 'Reminder: UX session in 24h', to: '+60 12 345 6789', date: 'May 17 3:00 PM', status: 'Delivered' },
{ id: 'C-9008', ch: 'Email', sub: 'Receipt — Brand Identity Sprint M1', to: 'faiz.fadhillah@example.com', date: 'May 8 9:14 AM', status: 'Delivered' },
{ id: 'C-9006', ch: 'Email', sub: 'Welcome to AI Fundamentals', to: 'faiz.fadhillah@example.com', date: 'May 1 8:00 AM', status: 'Delivered' },
{ id: 'C-9001', ch: 'SMS', sub: 'Login code: 482 109', to: '+60 12 345 6789', date: 'Apr 30 9:55 PM', status: 'Delivered' },
{ id: 'C-8998', ch: 'Email', sub: 'Profile incomplete reminder', to: 'faiz.fadhillah@example.com', date: 'Apr 28 10:02 AM', status: 'Bounced' },
];
const filtered = logs.filter(l =>
(ch === 'All' || l.ch === ch) &&
(search === '' || (l.sub + ' ' + l.to).toLowerCase().includes(search.toLowerCase()))
);
const tone = { Email: 'info', WhatsApp: 'success', SMS: 'purple' };
return (
{['All', 'Email', 'WhatsApp', 'SMS'].map(f => (
setCh(f)}
className={`px-4 h-8 rounded-full text-sm transition-colors ${ch === f ? 'bg-neutral-900 text-white font-semibold' : 'bg-white border border-neutral-200 text-neutral-700 hover:bg-neutral-50'}`}>
{f}
))}
Channel
Subject
Recipient
Date
Status
{filtered.length === 0 ? (
No matches.
{l.ch} {l.sub}
{l.to}
{l.date}
{l.status}
))}
);
}
/* ===== Analytics Dashboard ===== */
function AnalyticsDashPage() {
return (
Last 30 days Last 90 days This year
Revenue by week
{['Revenue', 'Bookings', 'Visits'].map((t, i) => (
{t}
))}
Top listings
{[
{ t: 'Batik Painting Workshop', p: 82 },
{ t: 'Sourdough Bread Class', p: 64 },
{ t: 'Pottery for Beginners', p: 48 },
{ t: 'Brand Identity Sprint', p: 26 },
].map(it => (
))}
Where bookings come from
{[{ src: 'Direct', n: '42%' }, { src: 'Search', n: '28%' }, { src: 'Programs', n: '18%' }, { src: 'Referral', n: '12%' }].map(s => (
))}
Reviews this month
4.9
{[5, 4, 3, 2, 1].map(n => (
{n}★
{n === 5 ? 24 : n === 4 ? 5 : n === 3 ? 1 : 0}
))}
);
}
/* ===== Manage Listings ===== */
const LISTINGS_BY_HUB = [
{ experiences: EXPERIENCES.slice(0, 6), expertise: EXPERTISE },
{
experiences: [
{ id: 'me1', title: 'AI Prompt Lab (Hands-on)', duration: '2 hours', location: 'Online', rating: 4.8 },
{ id: 'me2', title: 'Build Your First Chatbot', duration: '3 hours', location: 'Online', rating: 4.9 },
{ id: 'me3', title: 'Data Viz with AI', duration: '2.5 hours', location: 'Cyberjaya', rating: 4.7 },
{ id: 'me4', title: 'Automate Your Workflow with AI', duration: '2 hours', location: 'Online', rating: 4.8 },
],
expertise: [
{ id: 'mx1', title: 'AI Strategy Workshop', delivery: 'Remote', category: 'Strategy', price: 'from RM 9,000' },
{ id: 'mx2', title: 'LLM Integration Sprint', delivery: 'Remote', category: 'Tech', price: 'from RM 18,000' },
{ id: 'mx3', title: 'Data Pipeline Setup', delivery: 'Remote', category: 'Tech', price: 'from RM 14,000' },
{ id: 'mx4', title: 'Prompt Ops Playbook', delivery: 'Online', category: 'Content', price: 'from RM 6,000' },
],
},
{
experiences: [
{ id: 'sk1', title: 'Hand Lettering Basics', duration: '3 hours', location: 'Bangsar, KL', rating: 4.9 },
{ id: 'sk2', title: 'Brand Photography Walk', duration: '4 hours', location: 'Kuala Lumpur', rating: 4.8 },
{ id: 'sk3', title: 'Risograph Print Studio', duration: '5 hours', location: 'Petaling Jaya', rating: 5.0 },
],
expertise: [
{ id: 'skx1', title: 'Brand Identity Sprint — 2 weeks', delivery: 'Online + 1 in-person', category: 'Branding', price: 'from RM 8,500' },
{ id: 'skx2', title: 'Packaging Design System', delivery: 'Remote', category: 'Design', price: 'from RM 11,000' },
{ id: 'skx3', title: 'Art Direction Retainer', delivery: 'Remote', category: 'Content', price: 'from RM 5,500' },
],
},
];
function SvcThumb({ hue = 265 }) {
return {Number(v).toFixed(1)} ;
}
function SvcActions({ row = {}, kind = 'Experience' }) {
const q = new URLSearchParams({ edit: String(row.id || ''), name: row.name || '', kind, desc: row.desc || '' }).toString();
const editTo = `/app/service/create/basics?${q}`;
const viewTo = row.slug ? (kind === 'Expertise' ? `/web/expertise/${row.slug}` : `/web/experiences/${row.slug}`) : null;
return (
);
}
/* Figma: pill dropdown filter with checkbox-style menu (Service / Status / Advanced filter) */
function PillFilter({ label, value, options, onChange, align = 'left' }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [open]);
return (
setOpen(o => !o)}
className="inline-flex items-center gap-2 h-9 px-4 rounded-full border border-neutral-200 bg-white text-sm text-neutral-800 hover:border-neutral-300 transition-colors">
{label && {label}: }
{value}
{open && (
{options.map(o => (
{ onChange(o); setOpen(false); }}
className="w-full flex items-center justify-between gap-4 px-5 py-2.5 text-left text-[15px] hover:bg-neutral-50 transition-colors">
{o}
{value === o
?
))}
)}
);
}
function ExportButton() {
return (
);
}
function RowKebab({ items, plain }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [open]);
return (
setOpen(o => !o)} className={plain ? 'text-neutral-400 hover:text-neutral-700' : 'w-8 h-8 rounded-lg border border-neutral-300 flex items-center justify-center text-neutral-500 hover:bg-neutral-50'}>
{open && (
{items.map((it, i) => (
setOpen(false)}
className={`w-full flex items-center gap-3 px-4 py-2 text-left text-sm hover:bg-neutral-50 ${it.danger ? 'text-red-600' : 'text-neutral-700'}`}>
))}
)}
);
}
/* ===== Manage Hub Services — data ===== */
const SVC_STATUSES = ['All', 'Active', 'Inactive', 'Under review', 'Drafted', 'Backlog'];
const SVC_STATUS_POOL = ['Active', 'Active', 'Open for enquiries', 'Active', 'Drafted', 'Drafted'];
const SVC_DATES = ['12 Jan 2026', '12 Jan 2026', '15 Feb 2026', '20 Mar 2026', '25 Apr 2026', '15 Jun 2026'];
const SVC_BK = [
{ booked: 30, total: true, sessions: 3 },
{ booked: 27, capacity: 40 },
{ booked: 18, capacity: 30 },
{ booked: 34, capacity: 40 },
{ booked: 18, capacity: 20 },
{ booked: 21, capacity: 25 },
];
const BOOKING_ATTENDEES = [
{ id: 'b1', name: 'John Doe', email: 'johndoe@gmail.com', contact: '+6011-122-1234', session: 'Jul 13, 2026', booked: '1 week ago', tickets: '1x', paid: 'FREE' },
{ id: 'b2', name: 'Jane Smith', email: 'janesmith@yahoo.com', contact: '+6012-234-2345', session: 'Jul 13, 2026', booked: '2 weeks ago', tickets: '2x', paid: 'FREE' },
{ id: 'b3', name: 'Michael Brown', email: 'michaelbrown@hotmail.com', contact: '+6013-345-3456', session: 'Jul 13, 2026', booked: '1 week ago', tickets: '1x', paid: 'FREE' },
{ id: 'b4', name: 'Emily Davis', email: 'emilydavis@gmail.com', contact: '+6014-456-4567', session: 'Jul 11, 2026', booked: '5 days ago', tickets: '1x', paid: 'FREE' },
{ id: 'b5', name: 'David Wilson', email: 'davidwilson@outlook.com', contact: '+6015-567-5678', session: 'Jul 11, 2026', booked: '1 day ago', tickets: '1x', paid: 'FREE' },
{ id: 'b6', name: 'Sarah Johnson', email: 'sarahjohnson@icloud.com', contact: '+6016-678-6789', session: 'Jul 11, 2026', booked: '3 days ago', tickets: '2x', paid: 'FREE' },
];
function svcStatusColor(s) { return s === 'Active' ? 'text-green-600' : s === 'Open for enquiries' ? 'text-blue-600' : s === 'Under review' ? 'text-amber-600' : 'text-neutral-500'; }
function ServiceRowActions({ pinned }) {
return (
);
}
function CheckCell() { return {children}{sortable &&
{b.total ? {b.booked} Total : {b.booked}/{b.capacity} } Details
{b.sessions &&
{b.sessions} Sessions
}
);
}
/* ===== Booking Details modal (attendee list) ===== */
function BookingDetailsModal({ svc, onClose }) {
const [session, setSession] = useState('All');
const [q, setQ] = useState('');
const list = BOOKING_ATTENDEES.filter(a => q === '' || (a.name + ' ' + a.email).toLowerCase().includes(q.toLowerCase()));
const bk = svc.bk || { booked: 6, capacity: 20 };
return (
e.stopPropagation()} className="bg-white rounded-2xl w-full max-w-[1040px] my-8 p-7" style={{ boxShadow: '0 24px 64px rgba(0,0,0,0.25)' }}>
Booking Details
{svc.kind === 'Expertise' ? 'EXPERTISE / EXPERT' : 'EXPERIENCE'} CREATED ON LAST MODIFIED STATUS LOCATION BOOKINGS RATING
{svc.name}
{svc.host}
{svc.created}
{svc.modified}
{svc.status} {svc.location}
{bk.total ? bk.booked + ' Total' : bk.booked + '/' + bk.capacity} Details {bk.sessions ? {bk.sessions} Sessions
: null}
Booking List (30/60 Total)
CONTACT INFO EMAIL CONTACT SESSIONS TIME & DATE TIME BOOKED TICKET(S) PAID AMOUNT ACTION
{list.map(a => (
{a.name}
{a.email}
{a.contact}
{a.session}
{a.booked}
{a.tickets}
{a.paid}
{ onClose(); navigate('/app/hub/booking/' + a.id); }} className="h-9 px-4 border border-neutral-300 rounded-lg text-[13px] font-semibold hover:bg-neutral-50">Details
))}
Showing 1-6 of 6 {[1, 2, 3].map(p => {p} )}… 26
);
}
function ManageListingsDashPage() {
const hub = useHub();
const L = LISTINGS_BY_HUB[hubIdx(hub)] || LISTINGS_BY_HUB[0];
const hubName = (typeof HUB_NAMES !== 'undefined' && HUB_NAMES[hubIdx(hub)]) || 'Your Hub';
const [service, setService] = useState('Experience');
const [status, setStatus] = useState('All');
const [search, setSearch] = useState('');
const [bkModal, setBkModal] = useState(null);
const isExp = service === 'Experience';
const src = isExp ? L.experiences : L.expertise;
const _slugify = (t) => String(t || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
const rows = src.map((e, i) => ({
id: e.id, name: e.title, host: e.host || hubName,
slug: e.slug || _slugify(e.title), kind: isExp ? 'Experience' : 'Expertise',
hubSlug: e.hubSlug || _slugify(e.host || hubName),
status: SVC_STATUS_POOL[i % SVC_STATUS_POOL.length],
created: SVC_DATES[i % SVC_DATES.length], modified: SVC_DATES[i % SVC_DATES.length],
location: e.location || 'Online', mode: e.location === 'Online' || !e.location ? 'Online' : '-',
bk: SVC_BK[i % SVC_BK.length], rating: e.rating, hue: e.hue != null ? e.hue : 200 + i * 24, pinned: i === 0,
})).filter(r => (status === 'All' || r.status === status) && (search === '' || (r.name + ' ' + r.host).toLowerCase().includes(search.toLowerCase())));
return (
{ setService(v); setStatus('All'); }} />
{SVC_STATUSES.map(sc => ( setStatus(sc)} className={`px-4 h-9 rounded-full text-[13px] font-medium border transition-colors ${status === sc ? 'bg-neutral-900 text-white border-neutral-900' : 'bg-white text-neutral-600 border-neutral-200 hover:bg-neutral-50'}`}>{sc} ))}
{isExp ? 'EXPERIENCE' : 'EXPERTISE & EXPERT'}
{!isExp && MODE }
CREATED ON
LAST MODIFIED
STATUS
{isExp && LOCATION }
BOOKINGS
RATING
ACTION
{rows.length === 0 && No services match this filter.
{r.mode} }
{r.created}
{r.modified}
{r.status} {r.location} }
setBkModal(r)} />
))}
Showing 1-{rows.length} of {rows.length}
{[1, 2, 3].map(p => {p} )}… 26
{bkModal && setBkModal(null)} />}
);
}
/* ===== Manage Hub Gigs ===== */
const GIG_ROWS_BY_HUB = [
[
{ id: 'g1', name: 'AI Prompt Engineering Coach', by: 'Service host', type: 'Coach', posted: 'Jun 9, 2026', proposals: 5, hire: '3 hires', status: 'Open' },
{ id: 'g2', name: 'Business Strategy Workshop', by: 'Created by Sara Lee', type: 'Trainer', posted: 'May 13, 2026', proposals: 1, hire: 'Ravi Kumar Sharma', status: 'Open' },
{ id: 'g3', name: 'MTA Personal Career Coaching', by: 'Created by Marlisa Ishak', type: 'Coach', posted: 'May 11, 2026', proposals: 2, hire: '-', status: 'Open' },
{ id: 'g4', name: 'Leadership Retreat', by: 'Created by Joseph Domingo', type: 'Coach', posted: 'Jan 22, 2026', proposals: 2, hire: '-', status: 'Open' },
{ id: 'g5', name: 'Digital Marketing Seminar', by: 'Created by Li Anne', type: 'Trainer', posted: 'Mar 9, 2026', proposals: 2, hire: 'Ahmad Rizal Hassan', status: 'Closed' },
],
[
{ id: 'mg1', name: 'AI Curriculum Designer', by: 'Created by Faiz F.', type: 'Trainer', posted: 'Jun 14, 2026', proposals: 4, hire: 'Nadia Rahman', status: 'Open' },
{ id: 'mg2', name: 'LLM Integration Engineer', by: 'Created by Amir T.', type: 'Coach', posted: 'Jun 2, 2026', proposals: 7, hire: '2 hires', status: 'Open' },
{ id: 'mg3', name: 'Data Storytelling Workshop', by: 'Created by Sofia P.', type: 'Trainer', posted: 'May 20, 2026', proposals: 3, hire: '-', status: 'Open' },
{ id: 'mg4', name: 'Prompt Ops Consultant', by: 'Created by Marcus O.', type: 'Coach', posted: 'Apr 8, 2026', proposals: 1, hire: 'Rafael Tan', status: 'Closed' },
],
[
{ id: 'sg1', name: 'Brand Identity Facilitator', by: 'Created by Studio Kuala', type: 'Coach', posted: 'Jun 11, 2026', proposals: 6, hire: '4 hires', status: 'Open' },
{ id: 'sg2', name: 'Risograph Print Instructor', by: 'Created by Dina L.', type: 'Trainer', posted: 'May 30, 2026', proposals: 2, hire: 'Tasha Lim', status: 'Open' },
{ id: 'sg3', name: 'Photography Mentor', by: 'Created by Frame & Field', type: 'Coach', posted: 'Mar 18, 2026', proposals: 3, hire: '-', status: 'Closed' },
],
];
function gigHue(s) { let h = 0; for (let i = 0; i < String(s).length; i++) h = (h + String(s).charCodeAt(i) * 7) % 360; return h; }
function ManageGigsDashPage() {
const hub = useHub();
const GIG_ROWS = GIG_ROWS_BY_HUB[hubIdx(hub)] || GIG_ROWS_BY_HUB[0];
const [status, setStatus] = useState('All');
const [search, setSearch] = useState('');
const q = search.toLowerCase();
const rows = GIG_ROWS.filter(g => (status === 'All' || g.status === status) && (q === '' || (g.name + ' ' + g.by).toLowerCase().includes(q)));
return (
{['All', 'Open', 'Closed'].map(t => ( setStatus(t)} className={`px-4 h-9 rounded-full text-[13px] font-medium border transition-colors ${status === t ? 'bg-neutral-900 text-white border-neutral-900' : 'bg-white text-neutral-600 border-neutral-200 hover:bg-neutral-50'}`}>{t} ))}
GIG DETAILS
TYPE
POSTED ON
PROPOSALS
HIRE
STATUS
ACTION
{rows.length === 0 && No gigs match this filter.
{g.type}
{g.posted}
{g.proposals}
{g.hire === '-' ? - :
{g.status}
))}
Showing 1-{rows.length} of {rows.length}
{[1, 2, 3].map(p => {p} )}… 26
);
}
function ManageProgramsDashPage() {
const [tab, setTab] = useState('All');
const [search, setSearch] = useState('');
const programs = [
{ id: 'pg1', title: 'AI4U Program', status: 'Published', learners: 1751, exp: 215, start: '06 May 2026', hue: 290 },
{ id: 'pg2', title: 'AI Fluency by Microsoft', status: 'Published', learners: 642, exp: 28, start: '12 Jul 2025', hue: 220 },
{ id: 'pg3', title: 'Mereka Career Accelerator', status: 'Draft', learners: 0, exp: 0, start: '—', hue: 340 },
{ id: 'pg4', title: 'Sustainability for SMEs', status: 'Scheduled', learners: 0, exp: 12, start: '01 Aug 2026', hue: 170 },
];
const tone = { Published: 'success', Draft: 'neutral', Scheduled: 'warning' };
const filtered = programs.filter(p => (tab === 'All' || p.status === tab) && (search === '' || p.title.toLowerCase().includes(search.toLowerCase())));
return (
{['All', 'Published', 'Scheduled', 'Draft'].map(f => (
setTab(f)}
className={`px-4 h-8 rounded-full text-sm transition-colors ${tab === f ? 'bg-neutral-900 text-white font-semibold' : 'bg-white border border-neutral-200 text-neutral-700 hover:bg-neutral-50'}`}>
{f}
))}
{filtered.length === 0 ? (
) : filtered.map(p => (
{p.status}
{p.title}
Starts {p.start}
Learners
{p.learners.toLocaleString()}
Open
))}
);
}