);
}
function BuildingLogoPreview({ setup, compact }) {
return (
{setup.logoUrl ? : }
);
}
function readLogoFile(file, onDone, onError) {
if (!file) return;
if (!/^image\/(png|jpeg)$/.test(file.type)) {
onError && onError('Use a PNG or JPG logo for now.');
return;
}
if (file.size > 5000000) {
onError && onError('Logo file is too large. Use a file under 5 MB.');
return;
}
const reader = new FileReader();
reader.onload = () => {
const url = String(reader.result || '');
const img = new Image();
img.onload = () => {
if ((img.width * img.height) > 16000000) {
onError && onError('Logo image dimensions are too large. Use a smaller image.');
return;
}
const max = 480;
const scale = Math.min(1, max / Math.max(img.width, img.height));
const canvas = document.createElement('canvas');
canvas.width = Math.max(1, Math.round(img.width * scale));
canvas.height = Math.max(1, Math.round(img.height * scale));
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
const output = canvas.toDataURL(file.type === 'image/jpeg' ? 'image/jpeg' : 'image/png', 0.86);
if (output.length > 650000) {
onError && onError('Logo preview is still too large. Try a simpler PNG or JPG.');
return;
}
try {
localStorage.setItem('__stratasnap_logo_probe', output);
localStorage.removeItem('__stratasnap_logo_probe');
} catch (e) {
onError && onError('Browser storage is full. Remove other prototype data before uploading a logo.');
return;
}
onDone(output);
};
img.onerror = () => onError && onError('Could not process that logo image.');
img.src = url;
};
reader.onerror = () => onError && onError('Could not read that logo file.');
reader.readAsDataURL(file);
}
function BuildingSetupMobile({ setup, patchSetup, go, toast, setToast, startAtFirst }) {
const SS = window.SS;
const readiness = SS.setupProgress(setup);
const nextToStep = { profile: 'profile', routing: 'routing', emergency: 'emergency', brand: 'brand', locations: 'locations', qr: 'posters', scan: 'test', notify: 'test' };
const flowSteps = [
{ id: 'profile', label: 'Building', eyebrow: 'Step 1 of 7', question: 'What building is this for?', desc: 'Set the council-facing name, address, lot count, and operating mode first.', required: true, icon: 'building', decision: 'Council confirms the legal or familiar building name residents will recognize.', impact: 'This name appears on posters, status pages, and the council dashboard.' },
{ id: 'routing', label: 'Routing', eyebrow: 'Step 2 of 7', question: 'Who should receive new reports?', desc: 'Every report needs one accountable inbox before residents start scanning.', required: true, icon: 'send', decision: 'Council chooses the shared email or manager inbox that will receive new reports.', impact: 'Residents get a clear handoff instead of another scattered message thread.' },
{ id: 'emergency', label: 'Emergency', eyebrow: 'Step 3 of 7', question: 'What should residents do if it is urgent?', desc: 'Urgent leaks, access failures, and safety issues should not enter a normal queue first.', required: true, icon: 'alert', decision: 'Council records the emergency line or manager instructions residents should see first.', impact: 'Residents are directed to the right urgent path before submitting a standard report.' },
{ id: 'brand', label: 'Brand', eyebrow: 'Step 4 of 7', question: 'What should the app and posters look like?', desc: 'Choose an app accent preset, then add a building or management logo if needed.', required: false, icon: 'ssPoster', decision: 'Council picks the approved accent and decides whether printed materials should carry local building branding.', impact: 'Residents can trust that the QR poster and status page belong to their building.' },
{ id: 'locations', label: 'Locations', eyebrow: 'Step 5 of 7', question: 'Where should residents be able to scan?', desc: 'Start with common-property areas where issue locations often get described vaguely.', required: true, icon: 'pin', decision: 'Council chooses the first pilot locations for QR posters.', impact: 'Reports arrive with a known place attached, so triage starts faster.' },
{ id: 'posters', label: 'Posters', eyebrow: 'Step 6 of 7', question: 'Do these QR poster IDs look right?', desc: 'Each active location gets a public QR code and a private setup check.', required: true, icon: 'qr', decision: 'Council checks that each poster label maps to the right physical area.', impact: 'Residents scan the right code and the issue lands on the right map location.' },
{ id: 'test', label: 'Launch test', eyebrow: 'Step 7 of 7', question: 'Can this building launch safely?', desc: 'Test the scan and notification path before printing or placing posters.', required: true, icon: 'shieldCheck', decision: 'Council confirms the end-to-end flow works before residents see it.', impact: 'The first real resident report has a tested route from scan to council inbox.' },
];
const initialStep = (startAtFirst || !setup.activated) ? 'profile' : (nextToStep[readiness.next ? readiness.next.id : 'profile'] || 'profile');
const [stepId, setStepId] = React.useState(initialStep);
const set = (patch) => patchSetup((s) => ({ ...s, ...patch }));
const themes = SS.APP_THEMES || [];
const updateLoc = (id, patch) => patchSetup((s) => ({
...s,
locations: s.locations.map((l) => l.id === id ? { ...l, ...patch } : l),
}));
const activeLocations = setup.locations.filter((l) => l.active);
const testedLocations = activeLocations.filter((l) => l.tested);
const validEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(setup.routingEmail || '').trim());
const stepIndex = Math.max(0, flowSteps.findIndex((s) => s.id === stepId));
const currentStep = flowSteps[stepIndex] || flowSteps[0];
const goStep = (id) => setStepId(id);
const stepDone = {
profile: !!(setup.buildingName && setup.address && setup.lots),
routing: validEmail,
emergency: !!setup.emergencyContact,
brand: !!setup.appTheme || !!setup.logoUrl,
locations: activeLocations.length >= 5,
posters: activeLocations.length > 0 && activeLocations.every((l) => l.qrId),
test: readiness.launchReady,
};
const testAll = () => {
patchSetup((s) => ({ ...s, locations: s.locations.map((l) => ({ ...l, tested: true })), testScanPassed: true }));
setToast('Test scan passed for active QR locations');
};
const sendNotification = () => {
set({ notificationTested: true });
setToast('Notification test sent to the routing email');
};
const activate = () => {
if (!SS.setupProgress(setup).launchReady) {
setToast('Finish the required setup steps before launch');
return;
}
set({ activated: true });
setToast('Building intake is marked ready');
};
const canContinue = () => {
if (stepId === 'profile') return !!(setup.buildingName && setup.address && setup.lots);
if (stepId === 'routing') return validEmail;
if (stepId === 'emergency') return !!setup.emergencyContact;
if (stepId === 'locations') return activeLocations.length >= 5;
if (stepId === 'posters') return activeLocations.length > 0;
return true;
};
const nextStep = () => {
if (!canContinue()) {
const messages = {
profile: 'Add the building name, address, and number of lots.',
routing: 'Add a valid routing email before continuing.',
emergency: 'Add emergency instructions before continuing.',
locations: 'Choose at least five reporting locations for the pilot.',
posters: 'Turn on at least one reporting location first.',
};
setToast(messages[stepId] || 'Complete this step before continuing');
return;
}
setStepId(flowSteps[Math.min(flowSteps.length - 1, stepIndex + 1)].id);
};
const previousStep = () => setStepId(flowSteps[Math.max(0, stepIndex - 1)].id);
const skipOptional = () => setStepId(flowSteps[Math.min(flowSteps.length - 1, stepIndex + 1)].id);
const StepFooter = () => (
);
if (stepId === 'emergency') return (
set({ emergencyContact: e.target.value })} />Emergency issues should direct residents to 911, the building emergency line, or the property manager emergency line before they submit a normal StrataSnap report.
);
if (stepId === 'brand') return (
{themes.map((theme) => (
))}
{setup.logoUrl && }
A logo is optional. If you skip this, StrataSnap will use the default wordmark on setup previews and posters.
);
if (stepId === 'locations') return (
{setup.locations.map((l) => (
))}
{activeLocations.length} active locations. Choose at least five for the first pilot.
{setup.activated ? 'Ready to launch QR intake' : currentStep.label + ' setup'}
{setup.activated ? 'Residents can scan posters and reports will land in the issue inbox.' : 'Build the intake path in the same order council will approve it: building, routing, safety, locations, posters, then launch tests.'}
{readiness.percent}%
{flowSteps.map((t, i) => )}
{currentStep.eyebrow}
{currentStep.question}
{currentStep.desc}
{renderStep()}
{toast && {toast}}
);
}
function Queue({ tickets, onOpen, onNew, go, toast }) {
const SS = window.SS;
const [view, setView] = React.useState('All');
const open = (t) => SS.isOpenTicket(t);
const isUrgent = (t) => open(t) && t.priority === 'High';
const CHIPS = [['All', null], ['Urgent', 'var(--st-urgent)'], ['New', 'var(--st-blue)'], ['In review', 'var(--st-violet)'], ['Waiting', 'var(--st-amber)'], ['Resolved', 'var(--st-green)']];
const match = (t) => {
if (view === 'All') return true;
if (view === 'Urgent') return isUrgent(t);
if (view === 'New') return t.status === 'New';
if (view === 'In review') return t.status === 'Needs review';
if (view === 'Waiting') return t.status.startsWith('Waiting') || t.status === 'Scheduled';
if (view === 'Resolved') return t.status === 'Resolved';
return true;
};
const list = tickets.filter(match).slice().sort((a, b) => isUrgent(b) - isUrgent(a) || new Date(b.createdAt) - new Date(a.createdAt));
return (
{e.target.closest('.rev-map').classList.add('noimg');}} />
{stats.slice(0, 3).map((s, i) =>
{s.count}
)}
