// Portal screens — hand-built React mocks that mirror the real // portal.acmedia.cloud UI as closely as possible. Reference screenshots // of the live product live in ../screenshots/ for comparison. // // Design tokens used throughout (mirroring Portal's Tailwind palette): // ink #0f172a / #111 // text gray #6b7280 (gray-500) // light gray #9ca3af (gray-400) // hairline rgba(0,0,0,0.06) // surface tint #fafaf8 (cards) / #fef3c7 amber-50 banner / #eff6ff blue-50 // page bg #ffffff /* ── Shared atoms specific to Portal screens ───────────────────────── */ // Real status pills (CONFIRMED green, AWAITING REVIEW amber, COMPLETED indigo, etc.) const STATUS_PILL = { Confirmed: { bg: "#dcfce7", fg: "#166534" }, "Awaiting Review":{ bg: "#fef3c7", fg: "#92400e" }, "Action Needed": { bg: "#fef3c7", fg: "#92400e" }, Completed: { bg: "#e0e7ff", fg: "#3730a3" }, Cancelled: { bg: "#fee2e2", fg: "#991b1b" }, }; const StatusBadge = ({ s }) => { const c = STATUS_PILL[s] || STATUS_PILL.Confirmed; return ( {s} ); }; // Production stage chip (used inside Check Status panel) const STAGE_PILL = { "To Shoot": { bg: "#f3f4f6", fg: "#6b7280", fill: "linear-gradient(90deg,#d1d5db,#9ca3af)" }, "In Queue": { bg: "#fffbeb", fg: "#b45309", fill: "linear-gradient(90deg,#fcd34d,#f59e0b)" }, "Editing": { bg: "#eff6ff", fg: "#2563eb", fill: "linear-gradient(90deg,#60a5fa,#2563eb)" }, "Delivered": { bg: "#f0fdf4", fg: "#15803d", fill: "linear-gradient(90deg,#4ade80,#16a34a)" }, "Ready for Invoicing": { bg: "#ecfdf5", fg: "#047857", fill: "linear-gradient(90deg,#10b981,#059669)" }, }; const StageChip = ({ s }) => { const c = STAGE_PILL[s]; return ( {s} ); }; const ServiceProgress = ({ service, stage, pct, eta }) => { const c = STAGE_PILL[stage]; return (
{service === "Film" ? "🎬" : "📸"} {service}
{pct}%
{eta &&
ETA: {eta}
}
); }; // Sidebar — minimal vertical icon rail (matches real /bookings layout) const Rail = ({ active = "bookings" }) => { const Icon = ({ name, on }) => { const paths = { logo: , list: <>, help: <>, gear: <>, out: <>, }; return (
{paths[name]}
); }; return (
AC Media
AT
); }; /* ── Helpers ──────────────────────────────────────────────────────── */ const formatPrice = (n) => "$" + Number(n).toLocaleString("en-AU"); /* ── 1. DASHBOARD — bookings list with mixed statuses ──────────── */ const DASH_BOOKINGS = [ { id: "AC-2041", status: "Confirmed", price: 4200, address: "14 Grange Rd, Toorak VIC 3142", sub: "Bundle 2: Luxe · 24 Apr at 10:00", actions: ["check", "reschedule", "cancel"], }, { id: "AC-2042", status: "Confirmed", price: 2800, address: "3 Kooyong Rd, Armadale VIC 3143", sub: "Bundle 1: Premium · 28 Apr at 09:30", actions: ["check", "reschedule", "cancel"], }, { id: "AC-2044", status: "Awaiting Review", price: 1450, address: "12 Esplanade, Brighton VIC 3186", sub: "Film 2: Cinematic · 30 Apr at 11:00", banner: "We're reviewing your request. You'll hear from us within 2 hours during business hours.", actions: ["check", "brief", "withdraw"], }, ]; const Action = ({ kind, primary }) => { const labels = { check: "Check Status", reschedule: "Reschedule", cancel: "Cancel", brief: "Complete Brief", withdraw: "Withdraw" }; const isPrimary = primary; const isMuted = kind === "cancel" || kind === "withdraw"; return ( ); }; const BookingCard = ({ b }) => (

{b.address}

{b.sub}

{b.banner && (
{b.banner}
)}
{b.actions.map((a, i) => )}
); const DashboardMock = () => (
Your Schedule

My Bookings

{DASH_BOOKINGS.map((b) => )}
Archive

7/221 Chapel St, South Yarra VIC 3141

Photography 2: Studio · 23 Apr

); /* ── 2. WIZARD STEP 1 — package picker + Bundle 2: Luxe expanded ── */ const PKG_ROWS = [ { name: "Bundle 1: Premium", sub: "Film: 1× Master Film (60s) + 1× Social Film (45s). Photography: 15 edited images.", details: "Daylight only · Drone", price: 2800 }, { name: "Bundle 2: Luxe", sub: "Film: 1× Master Film (90s) + 1× Social Film (45s) + 1× Teaser (15s). Photography: 30 edited images.", details: "Daylight into dusk · Drone", price: 4200, selected: true }, { name: "Bundle 3: Epic", sub: "Film: 1× Master Film (90s) + 2× Social Films (45s each) + 1× Teaser (15s). Photography: 40 edited photos.", details: "Daylight + choice of dawn OR dusk · Drone", price: 5750 }, ]; const PackageRow = ({ p }) => (
{p.name}
{p.sub}
{p.details}
); const ExtraPill = ({ children }) => ( {children} ); const WizardMock = () => (
{/* Header */}
New Commission

Book a Shoot

{/* 3-step progress */}
{["Service", "Details", "Review"].map((s, i) => (
{i + 1}
{s}
{i < 2 &&
} ))}
{/* Step heading */}
Step 1 — Select your service

What are you after?

Choose your medium and we'll show you the right collections. Each package is tailored to a specific production scope.

{/* Tabs */}
{["Photography only", "Film only", "Both"].map((t, i) => ( ))}
{/* Package list with column headers */}
Bundle Details
{PKG_ROWS.map((p, i) => ( {p.selected && (
{/* Title row + SELECTED pill */}
Bundle 2: Luxe
10% bundle discount already applied. Includes drone.
Selected
{/* 2-column grid */}
What you get
1× Master Film (90s), 1× Social Film (45s), 1× Teaser (15s). 30 edited images. Includes drone.
On the day
6-hour shoot — daylight into dusk.
Daylight into dusk Drone included
{/* Extras pills */}
Add Floor Plan / Site Plan Add Social Reel Add FPV Drone Add Express Edit
)} ))}
); /* ── 3. SHOOT BRIEF — film brief, partly filled ──────────────── */ const FieldLabel = ({ children, required }) => ( ); const FieldBox = ({ children, multiline }) => (
{children}
); const Select = ({ value }) => (
{value}
); const BriefMock = () => (

Shoot Brief

Help us prepare for your shoot by providing a few details.

{/* Property card */}
12 Esplanade, Brighton VIC 3186
Film 2: Cinematic · 30 Apr 2026
{/* Section label */}
Videography
Access instructions for the videographer Vendor will be on site from 10am. Park in the driveway.
How will the videographer access the property?
Music preference