;
}
function NoServiceDot() {
return ;
}
/** Pick the SVG logo + display label for an integration block returned
* by /stores. Returns the placeholder dot when no service is wired
* yet (e.g. food safety until Jolt lands). */
function integrationLogo(integration) {
switch ((integration && integration.service) || '') {
case 'Square': return { e.stopPropagation(); close(); }}/>}
{open && (
);
}
function ConnDot({ state, msg, logo }) {
// Anything that isn't a live, working connection ('on') renders as
// an em-dash. "Installed but this store isn't mapped" (state='warn')
// is operationally equivalent to "not connected" for this store, so
// it gets the same empty cell — operators only see green dots when
// ingestion is actually happening.
if (state !== 'on') {
return (
e.stopPropagation()}>
)}
Open store detail
{paused ? 'Resume data sync' : 'Pause data sync'}
Reset integration auth
{needsAuth && One integration needs re-auth
}
Edit details…
Remove store
{logo}
Stores
Manage the locations Mise tracks for your organization. Each store inherits brand standards from its assigned brand.
0 ? 'active' : ''}`}>
{selected.size === 0 ? (
Select stores to bulk edit
) : (
<>
{selected.size} selected
)}
{notice && (
{notice}
)}
{loadError && (
Couldn't load stores from the backend: {loadError}
)}
{!loaded && (
Loading stores…
)}
{loaded && visibleStores.length === 0 && !loadError && (
No stores yet. Click "Add a new store" below to get started.
)}
Store
Brand
Address
Timezone
POS
Labor
Financials
Food safety
Status
{s.num}
{s.name}
{s.city}, {s.state}
{tzAbbrev(s.tz)}
{s.status === 'active' ? 'Active' : 'Paused'}
e.stopPropagation()} style={{
background: 'var(--bg)', borderRadius: 12, padding: 24, width: 520, maxWidth: '92vw',
boxShadow: '0 20px 60px rgba(11,27,38,.25)', border: '1px solid var(--hair)',
maxHeight: '90vh', overflowY: 'auto',
}}>
{brandOptions.length === 0 && (
{userOptions.length === 0 && (
{isNew ? 'Add store' : 'Edit store'}
{editing.num ? `${editing.num} ${editing.name || ''}`.trim() : 'New store'}
No brands defined yet. Add one from Settings → Brands.
)}
No users yet. Add one from Settings → Users & Roles.
)}
Audit grade and food-safety compliance feed the composite
operational score. Set them based on your most recent audit /
log review — once a food-safety integration (Jolt, etc.) is
wired the compliance % will be sourced live. POS, labor, and
food-safety connection state is derived from installed
integrations (Square, etc.) and isn't edited here.
Brands
Each store belongs to a brand. Brands drive the chip on the Stores list, and (later) the scoping for brand-specific playbook docs and rules.
{notice}
)}
{!loaded && (
Loading brands…
)}
{loaded && brands.length === 0 && (
No brands yet. Click Add brand above to create one — your
existing stores will then be assignable from Settings → Stores.
)}
{loaded && brands.length > 0 && (
{brands.map((b, i) => (
))}
)}
{editing && (
{b.name}
{b.color && {b.color}
}
e.stopPropagation()} style={{
background: 'var(--bg)', borderRadius: 12, padding: 24, width: 460, maxWidth: '92vw',
boxShadow: '0 20px 60px rgba(11,27,38,.25)', border: '1px solid var(--hair)',
}}>
{isNew ? 'Add brand' : 'Edit brand'}
{editing.name || 'New brand'}
{presetColors.map(c => (
Preview:
Slack & Notifications
Loading…
Slack & Notifications
Connect a Slack workspace so Mise can post alerts, daily briefs, and answers without leaving Slack. One workspace per organization for now.
{notice.msg}
)}
{statusError && (
Couldn't reach the Slack status endpoint: {statusError}.
Make sure the backend is running on {SETTINGS_API_BASE}.
)}
{!status.configured && (
Slack credentials not set on the server
An admin needs to add
copilot.slack.client-id,
client-secret, and signing-secret to
the server's environment. See deploy/slack-manifest.json.
No Slack workspace connected
Click below to install the Mise Slack app to your workspace. You'll be redirected to Slack to choose
the workspace and authorize the bot scopes (post, list channels, DM users).
Connected workspace
{status.teamName}
team: {status.teamId} · bot: {status.botUserId}
Default channel
Used when "Send to Slack" buttons don't pick a channel explicitly (e.g., daily briefs, alert sends without a per-store GM mapping).
Currently saved: #{status.defaultChannelName}
)}
Users & Roles
People in your organization. Linking a Slack profile lets Mise DM the right person when an alert fires for their store.
{notice.msg}
)}
{error && (
Error loading users: {error}
)}
{!slackStatus?.connected && (
Slack workspace isn't connected — you can still add users, but the Slack profile picker will be empty until you connect Slack.
)}
Name
Email
Role
Store
Slack
Loading…
)}
{!loading && users.length === 0 && (
No users yet. Click Invite user to add one.
)}
{users.map(u => {
const slack = u.slackUserId ? slackById.get(u.slackUserId) : null;
return (
{slack?.avatarUrl
? 
: {u.name.split(/\s+/).slice(0,2).map(p => p[0]).join('').toUpperCase()}}
{u.name}
{u.email}
{u.role}
{u.assignedStoreNum || '—'}
{slack ? `@${slack.name}` : (u.slackUserId ? u.slackUserId : 'not linked')}
e.stopPropagation()} style={{
background: 'var(--bg)', borderRadius: 12, padding: 24, width: 480, maxWidth: '92vw',
boxShadow: '0 20px 60px rgba(11,27,38,.25)', border: '1px solid var(--hair)',
}}>
{editing.id ? 'Edit user' : 'Invite user'}
{editing.name || 'New user'}
{children}
);
}
function SquareSettings({ kind = 'pos' }) {
// POS and Labor both flow from the same Square workspace, so this
// panel renders identically under either section — only the heading
// and intro copy change. Adding 7shifts/Homebase later means
// splitting the labor route into its own component.
const heading = kind === 'labor' ? 'Labor & Scheduling · Square' : 'POS · Square';
const headingShort = kind === 'labor' ? 'Labor & Scheduling' : 'POS';
const [status, setStatus] = React.useState(null);
const [statusError, setStatusError] = React.useState(null);
const [statusLoaded, setStatusLoaded] = React.useState(false);
const [locations, setLocations] = React.useState([]);
const [locsLoading, setLocsLoading] = React.useState(false);
const [locsError, setLocsError] = React.useState(null);
const [busy, setBusy] = React.useState(false);
const [notice, setNotice] = React.useState(null);
const refresh = React.useCallback(async () => {
setStatusError(null);
try {
const res = await fetch(`${SETTINGS_API_BASE}/square/workspace`, { cache: 'no-store' });
if (!res.ok) throw new Error(`${res.status}: ${await res.text() || res.statusText}`);
setStatus(await res.json());
} catch (e) {
setStatusError(e.message || String(e));
setStatus({ connected: false, configured: false, environment: 'sandbox' });
} finally {
setStatusLoaded(true);
}
}, []);
React.useEffect(() => {
refresh();
const params = new URLSearchParams(window.location.search);
const flag = params.get('square');
if (flag === 'connected') setNotice({ kind: 'ok', msg: 'Square workspace connected.' });
else if (flag === 'error') setNotice({ kind: 'err', msg: 'Square install failed: ' + (params.get('reason') || 'unknown') });
if (flag) {
const next = new URLSearchParams(window.location.search);
next.delete('square');
next.delete('reason');
window.history.replaceState({}, '', window.location.pathname + (next.toString() ? '?' + next : ''));
}
}, [refresh]);
React.useEffect(() => {
if (!notice) return;
const t = setTimeout(() => setNotice(null), 4500);
return () => clearTimeout(t);
}, [notice]);
const [syncStatus, setSyncStatus] = React.useState(null);
const [syncing, setSyncing] = React.useState(false);
const refreshSync = React.useCallback(() => {
fetch(`${SETTINGS_API_BASE}/square/sync/status`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : null)
.then(setSyncStatus)
.catch(() => setSyncStatus(null));
}, []);
React.useEffect(() => {
if (!status?.connected) return;
setLocsLoading(true);
setLocsError(null);
fetch(`${SETTINGS_API_BASE}/square/locations`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : Promise.reject(new Error(`${r.status}`)))
.then(setLocations)
.catch(e => setLocsError(e.message || String(e)))
.finally(() => setLocsLoading(false));
refreshSync();
}, [status?.connected, refreshSync]);
const onSyncNow = async () => {
setSyncing(true);
setNotice(null);
try {
const res = await fetch(`${SETTINGS_API_BASE}/square/sync?days=30`, { method: 'POST' });
if (!res.ok) throw new Error(`${res.status}: ${await res.text() || res.statusText}`);
const r = await res.json();
if (r.error) {
setNotice({ kind: 'err', msg: 'Sync failed: ' + r.error });
} else {
setNotice({ kind: 'ok', msg: `Synced ${r.locationsSynced} location${r.locationsSynced === 1 ? '' : 's'} · ${r.ordersFetched} orders · ${r.shiftsFetched ?? 0} shifts · ${r.inventoryRowsWritten ?? 0} inventory rows · ${(r.elapsedMs/1000).toFixed(1)}s` });
}
refreshSync();
} catch (e) {
setNotice({ kind: 'err', msg: 'Sync request failed: ' + (e.message || e) });
} finally {
setSyncing(false);
}
};
const onConnect = () => { window.location.href = `${SETTINGS_API_BASE}/square/install`; };
const onDisconnect = async () => {
if (!status?.merchantId) return;
if (!confirm('Disconnect Square? Mapped locations will also be cleared. Reinstalling restores them later.')) return;
setBusy(true);
try {
const res = await fetch(`${SETTINGS_API_BASE}/square/workspace?merchantId=${encodeURIComponent(status.merchantId)}`, { method: 'DELETE' });
if (!res.ok && res.status !== 204) throw new Error(String(res.status));
setStatus({ ...status, connected: false, merchantId: null, businessName: null });
setLocations([]);
setNotice({ kind: 'ok', msg: 'Disconnected.' });
} catch (e) {
setNotice({ kind: 'err', msg: 'Disconnect failed: ' + (e.message || e) });
} finally { setBusy(false); }
};
const onMap = async (locationId, locationName, miseStoreNum) => {
setBusy(true);
try {
const res = await fetch(`${SETTINGS_API_BASE}/square/locations/map`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ squareLocationId: locationId, locationName, miseStoreNum: miseStoreNum || null }),
});
if (!res.ok && res.status !== 204) throw new Error(String(res.status));
setLocations(curr => curr.map(l => l.id === locationId ? { ...l, mappedToStoreNum: miseStoreNum || null } : l));
} catch (e) {
setNotice({ kind: 'err', msg: 'Could not save mapping: ' + (e.message || e) });
} finally { setBusy(false); }
};
// Disconnected providers no longer render a panel — the section
// wrapper handles the "Add integration" CTA. Loading swallowed
// for the same reason.
if (!statusLoaded || !status?.connected) return null;
return (
{heading}
Connect Square to pull sales, payments, and labor into Mise. After install, map each Square location to a Mise store. {' '}environment: {status.environment}
{notice.msg}
)}
{statusError && (
Couldn't reach the Square status endpoint: {statusError}
)}
{/* Disconnected / unconfigured states are no longer rendered
inline — the section wrapper (PosSettings / LaborSettings)
surfaces an "Add integration" picker for those cases. */}
{!status.connected && null}
{status.connected && (
<>
Connected merchant
{status.businessName || status.merchantId}
merchant: {status.merchantId} · environment: {status.environment}
Sales sync
{syncStatus?.lastSyncedAt
? <>Last synced {new Date(syncStatus.lastSyncedAt).toLocaleString()} through {syncStatus.lastSyncThrough} · status: {syncStatus.lastStatus}{syncStatus.lastError ? ` (${syncStatus.lastError})` : ''}
: 'Never synced. Map at least one location below, then click Sync now.'}
Map Square locations to Mise stores
Each Square location can map to one Mise store. Locations left unmapped are still pulled but won't surface anywhere yet.
Loading locations…
)}
{locsError && (
Couldn't fetch locations: {locsError}
)}
{!locsLoading && !locsError && locations.length === 0 && (
No Square locations on this merchant.
)}
{locations.map(l => (
{l.name}
{l.address || '—'} · {l.id} · {l.status}
{!loaded && (
)}
{visible}
{loaded && visible.length === 0 && (
)}
{loaded && visible.length > 0 && candidates.length > 0 && (
)}
);
}
function EmptyIntegrationState({ category, candidates, onPick }) {
const label = category === 'pos' ? 'POS'
: category === 'labor' ? 'Labor & Scheduling'
: category === 'accounting' ? 'Accounting'
: 'Food Safety';
return (
Loading integrations…
Need another provider?
{label}
No {label.toLowerCase()} integrations connected yet.
{candidates.length > 0 ? (
<>
Connect one of the supported providers to start syncing data.
No providers configured on the server. Ask an admin to add credentials for one of the supported integrations.
)}
{open && (
<>
;
}
/** Accounting section — QuickBooks Online today; Sage / R365 later. */
function AccountingSettings() {
return
setPrefixInput(e.target.value)}
placeholder="acme"
disabled={busy}
style={inputStyle}
onKeyDown={e => { if (e.key === 'Enter' && prefixInput.trim()) onConnect(); }}
/>
))}
{/* Sales + inventory sync */}
{status.connected && (
)}
{/* Outlets mapper */}
{status.connected && (
{outletsLoading && (
))}
)}
);
}
function ShopifySettings() {
const [status, setStatus] = React.useState(null);
const [statusLoaded, setStatusLoaded] = React.useState(false);
const [shops, setShops] = React.useState([]);
const [locations, setLocations] = React.useState([]);
const [locsLoading, setLocsLoading] = React.useState(false);
const [locsError, setLocsError] = React.useState(null);
const [busy, setBusy] = React.useState(false);
const [notice, setNotice] = React.useState(null);
const [shopInput, setShopInput] = React.useState('');
const [showForm, setShowForm] = React.useState(false);
const [syncStatus, setSyncStatus] = React.useState(null);
const [syncing, setSyncing] = React.useState(false);
const refreshSync = React.useCallback(() => {
fetch(`${SETTINGS_API_BASE}/shopify/sync/status`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : null)
.then(setSyncStatus)
.catch(() => setSyncStatus(null));
}, []);
const onSyncNow = async () => {
setSyncing(true);
setNotice(null);
try {
const res = await fetch(`${SETTINGS_API_BASE}/shopify/sync?days=30`, { method: 'POST' });
if (!res.ok) throw new Error(`${res.status}: ${await res.text() || res.statusText}`);
const r = await res.json();
if (r.error) {
setNotice({ kind: 'err', msg: 'Sync failed: ' + r.error });
} else {
setNotice({ kind: 'ok', msg: `Synced ${r.shopsSynced} shop${r.shopsSynced === 1 ? '' : 's'} · ${r.ordersFetched} orders · ${r.inventoryRowsWritten} inventory rows · ${r.daysWritten} days · ${(r.elapsedMs/1000).toFixed(1)}s` });
}
refreshSync();
} catch (e) {
setNotice({ kind: 'err', msg: 'Sync request failed: ' + (e.message || e) });
} finally {
setSyncing(false);
}
};
const refresh = React.useCallback(async () => {
try {
const [w, s] = await Promise.all([
fetch(`${SETTINGS_API_BASE}/shopify/workspace`, { cache: 'no-store' }).then(r => r.ok ? r.json() : null),
fetch(`${SETTINGS_API_BASE}/shopify/shops`, { cache: 'no-store' }).then(r => r.ok ? r.json() : []),
]);
setStatus(w);
setShops(s || []);
setShowForm((s || []).length === 0);
} catch (e) {
setStatus({ connected: false, configured: false });
setShops([]);
} finally {
setStatusLoaded(true);
}
}, []);
React.useEffect(() => {
refresh();
const params = new URLSearchParams(window.location.search);
const flag = params.get('shopify');
if (flag === 'connected') setNotice({ kind: 'ok', msg: 'Shopify shop connected.' });
else if (flag === 'error') setNotice({ kind: 'err', msg: 'Shopify install failed: ' + (params.get('reason') || 'unknown') });
if (flag) {
const next = new URLSearchParams(window.location.search);
next.delete('shopify'); next.delete('reason');
window.history.replaceState({}, '', window.location.pathname + (next.toString() ? '?' + next : ''));
}
}, [refresh]);
React.useEffect(() => {
if (!notice) return;
const t = setTimeout(() => setNotice(null), 4500);
return () => clearTimeout(t);
}, [notice]);
React.useEffect(() => {
if (!status?.connected) return;
setLocsLoading(true);
setLocsError(null);
fetch(`${SETTINGS_API_BASE}/shopify/locations`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : Promise.reject(new Error(`${r.status}`)))
.then(setLocations)
.catch(e => setLocsError(e.message || String(e)))
.finally(() => setLocsLoading(false));
refreshSync();
}, [status?.connected, refreshSync]);
const onConnect = () => {
if (!shopInput.trim()) return;
window.location.href = `${SETTINGS_API_BASE}/shopify/install?shop=${encodeURIComponent(shopInput.trim())}`;
};
const onDisconnect = async (shopDomain) => {
if (!confirm(`Disconnect ${shopDomain}? Mapped locations will be cleared.`)) return;
setBusy(true);
try {
const res = await fetch(`${SETTINGS_API_BASE}/shopify/workspace?shop=${encodeURIComponent(shopDomain)}`, { method: 'DELETE' });
if (!res.ok && res.status !== 204) throw new Error(String(res.status));
await refresh();
setLocations(curr => curr.filter(l => l.shopDomain !== shopDomain));
setNotice({ kind: 'ok', msg: `Disconnected ${shopDomain}.` });
} catch (e) {
setNotice({ kind: 'err', msg: 'Disconnect failed: ' + (e.message || e) });
} finally { setBusy(false); }
};
const onMap = async (shopDomain, locationId, locationName, miseStoreNum) => {
setBusy(true);
try {
const res = await fetch(`${SETTINGS_API_BASE}/shopify/locations/map`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
shopDomain, shopifyLocationId: locationId, locationName,
miseStoreNum: miseStoreNum || null,
}),
});
if (!res.ok && res.status !== 204) throw new Error(String(res.status));
setLocations(curr => curr.map(l =>
(l.id === locationId && l.shopDomain === shopDomain)
? { ...l, mappedToStoreNum: miseStoreNum || null } : l));
} catch (e) {
setNotice({ kind: 'err', msg: 'Could not save mapping: ' + (e.message || e) });
} finally { setBusy(false); }
};
if (!statusLoaded) {
return ;
}
return (
{notice && (
)}
{/* Connected shops */}
{shops.length > 0 && (
setShopInput(e.target.value)}
placeholder="mise-test.myshopify.com"
disabled={busy}
style={inputStyle}
onKeyDown={e => { if (e.key === 'Enter' && shopInput.trim()) onConnect(); }}
/>
))}
{/* Sales + inventory sync */}
{status.connected && (
)}
{/* Locations mapper */}
{status.connected && (
{locsLoading && (
))}
)}
);
}
function DeputySettings() {
const [status, setStatus] = React.useState(null);
const [statusLoaded, setStatusLoaded] = React.useState(false);
const [subdomains, setSubdomains] = React.useState([]);
const [busy, setBusy] = React.useState(false);
const [notice, setNotice] = React.useState(null);
// Setup form state. We start collapsed when there are existing
// subdomains; expanded when there are none yet.
const [form, setForm] = React.useState({ subdomain: '', clientId: '', clientSecret: '' });
const [showForm, setShowForm] = React.useState(false);
// Per-subdomain locations cache.
const [locsBySub, setLocsBySub] = React.useState({});
const refreshStatus = React.useCallback(async () => {
try {
const [w, s] = await Promise.all([
fetch(`${SETTINGS_API_BASE}/deputy/workspace`, { cache: 'no-store' }).then(r => r.ok ? r.json() : null),
fetch(`${SETTINGS_API_BASE}/deputy/subdomains`, { cache: 'no-store' }).then(r => r.ok ? r.json() : []),
]);
setStatus(w);
setSubdomains(s || []);
setShowForm((s || []).length === 0);
} catch (e) {
setStatus({ connected: false, configured: false, encryptionReady: false });
setSubdomains([]);
} finally {
setStatusLoaded(true);
}
}, []);
React.useEffect(() => {
refreshStatus();
const params = new URLSearchParams(window.location.search);
const flag = params.get('deputy');
if (flag === 'connected') setNotice({ kind: 'ok', msg: 'Deputy workspace connected.' });
else if (flag === 'error') setNotice({ kind: 'err', msg: 'Deputy install failed: ' + (params.get('reason') || 'unknown') });
if (flag) {
const next = new URLSearchParams(window.location.search);
next.delete('deputy'); next.delete('reason');
window.history.replaceState({}, '', window.location.pathname + (next.toString() ? '?' + next : ''));
}
}, [refreshStatus]);
React.useEffect(() => {
if (!notice) return;
const t = setTimeout(() => setNotice(null), 5000);
return () => clearTimeout(t);
}, [notice]);
const onConfigure = async () => {
setBusy(true);
setNotice(null);
try {
const res = await fetch(`${SETTINGS_API_BASE}/deputy/configure`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
subdomain: form.subdomain.trim(),
clientId: form.clientId.trim(),
clientSecret: form.clientSecret,
}),
});
if (!res.ok) throw new Error(`${res.status}: ${await res.text() || res.statusText}`);
setNotice({ kind: 'ok', msg: 'Saved. Client secret encrypted at rest. Click Authorize to complete OAuth.' });
setForm({ subdomain: '', clientId: '', clientSecret: '' });
setShowForm(false);
await refreshStatus();
} catch (e) {
setNotice({ kind: 'err', msg: 'Save failed: ' + (e.message || e) });
} finally {
setBusy(false);
}
};
const onAuthorize = (sub) => {
window.location.href = `${SETTINGS_API_BASE}/deputy/install?subdomain=${encodeURIComponent(sub)}`;
};
const onDisconnect = async (sub) => {
if (!confirm(`Disconnect Deputy for ${sub}? OAuth credentials will be removed.`)) return;
setBusy(true);
try {
const res = await fetch(`${SETTINGS_API_BASE}/deputy/workspace?subdomain=${encodeURIComponent(sub)}`, { method: 'DELETE' });
if (!res.ok && res.status !== 204) throw new Error(String(res.status));
setNotice({ kind: 'ok', msg: `Disconnected ${sub}.` });
await refreshStatus();
} catch (e) {
setNotice({ kind: 'err', msg: 'Disconnect failed: ' + (e.message || e) });
} finally { setBusy(false); }
};
const loadLocations = async (sub) => {
if (locsBySub[sub]) return;
try {
const res = await fetch(`${SETTINGS_API_BASE}/deputy/locations?subdomain=${encodeURIComponent(sub)}`, { cache: 'no-store' });
if (!res.ok) throw new Error(`${res.status}`);
const data = await res.json();
setLocsBySub(prev => ({ ...prev, [sub]: data }));
} catch (e) {
setLocsBySub(prev => ({ ...prev, [sub]: { error: e.message || String(e) } }));
}
};
React.useEffect(() => {
subdomains.filter(s => s.authorized).forEach(s => loadLocations(s.subdomain));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [subdomains]);
const onMap = async (sub, deputyLocationId, locationName, miseStoreNum) => {
setBusy(true);
try {
const res = await fetch(`${SETTINGS_API_BASE}/deputy/locations/map`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
subdomain: sub, deputyLocationId, locationName,
miseStoreNum: miseStoreNum || null,
}),
});
if (!res.ok && res.status !== 204) throw new Error(String(res.status));
setLocsBySub(prev => {
const list = (prev[sub] || []).map(l => l.id === deputyLocationId
? { ...l, mappedToStoreNum: miseStoreNum || null } : l);
return { ...prev, [sub]: list };
});
} catch (e) {
setNotice({ kind: 'err', msg: 'Could not save mapping: ' + (e.message || e) });
} finally { setBusy(false); }
};
if (!statusLoaded) {
return ;
}
return (
{notice && (
setForm({ ...form, subdomain: e.target.value })} disabled={busy}
placeholder="e.g. acme.na.deputy.com" style={inputStyle}/>
setForm({ ...form, clientId: e.target.value })} disabled={busy} style={inputStyle}/>
Client secret
🔒 {status?.encryptionReady ? 'enc at rest' : 'enc not ready'}
}>
setForm({ ...form, clientSecret: e.target.value })} disabled={busy} style={inputStyle}/>
)}
);
}
/** Reusable badge surfaced in the Deputy heading copy so the operator
* can see at a glance that customer secrets are encrypted at rest. */
function EncryptionBadge({ ready }) {
return (
🔒 {ready ? 'AES-256-GCM at rest' : 'encryption disabled'}
);
}
function RulesSettings() {
const [rules, setRules] = React.useState(null);
const [error, setError] = React.useState(null);
React.useEffect(() => {
fetch(`${SETTINGS_API_BASE}/alerts/rules`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : Promise.reject(new Error(`${r.status}`)))
.then(setRules)
.catch(e => setError(e.message || String(e)));
}, []);
if (error) {
return (
);
}
if (rules === null) {
return (
);
}
// Group rules by category for the table.
const groups = {};
for (const r of rules) {
if (!groups[r.category]) groups[r.category] = [];
groups[r.category].push(r);
}
const categoryOrder = ['Sales', 'Labor', 'Inventory', 'Financials', 'Operational'];
const orderedCats = [
...categoryOrder.filter(c => groups[c]),
...Object.keys(groups).filter(c => !categoryOrder.includes(c)).sort(),
];
return (
))}
);
}
/* —— Daily Brief Schedule —— */
/** Tiny markdown renderer for brief bodies. Handles only the shapes
* the composer's prompt locks down (## headings, **bold**, - bullets,
* blank-line-separated paragraphs). Keeps us off react-markdown for
* this Babel-compiled page. */
function BriefBody({ md }) {
if (!md) return null;
const lines = md.split(/\r?\n/);
const blocks = [];
let bullets = null;
const flushBullets = () => {
if (bullets && bullets.length) blocks.push({ kind: 'ul', items: bullets });
bullets = null;
};
for (const raw of lines) {
const line = raw.trim();
if (!line) { flushBullets(); continue; }
const heading = /^#{1,6}\s+(.*)$/.exec(line);
if (heading) {
flushBullets();
blocks.push({ kind: 'h', text: heading[1] });
continue;
}
const bullet = /^[-*]\s+(.*)$/.exec(line);
if (bullet) {
const text = bullet[1].trim();
if (/^(none|nothing|n\/a)\.?$/i.test(text)) continue;
if (!bullets) bullets = [];
bullets.push(text);
continue;
}
flushBullets();
blocks.push({ kind: 'p', text: line });
}
flushBullets();
const inline = (text) => {
const parts = [];
let i = 0;
let key = 0;
const re = /\*\*([^*]+)\*\*/g;
let m;
while ((m = re.exec(text)) !== null) {
if (m.index > i) parts.push(text.slice(i, m.index));
parts.push({m[1]});
i = m.index + m[0].length;
}
if (i < text.length) parts.push(text.slice(i));
return parts;
};
return (
);
}
if (!cfg) {
return (
);
}
const inputStyle = {
width: '100%', padding: '8px 12px', borderRadius: 6,
border: '1px solid var(--hair)', background: 'var(--bg)',
fontSize: 14, color: 'var(--ink)', fontFamily: 'inherit',
};
const toggleRecipient = (uid) => {
setCfg(prev => {
const next = new Set(prev.recipients || []);
if (next.has(uid)) next.delete(uid); else next.add(uid);
return { ...prev, recipients: [...next] };
});
};
return (
{error && (
);
}
const sectionHeadStyle = {
fontSize: 11, color: 'var(--muted)', fontFamily: "'JetBrains Mono', monospace",
letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 10,
};
const subParaStyle = {
fontSize: 13, color: 'var(--muted)', lineHeight: 1.55,
margin: '0 0 14px', maxWidth: 680,
};
function RuleRow({ rule, isLast }) {
const [open, setOpen] = React.useState(false);
const hasDetails = (rule.details && rule.details.trim().length > 0)
|| (Array.isArray(rule.exampleFindings) && rule.exampleFindings.length > 0);
return (
{open && hasDetails && (
);
}
function PlaceholderPane({ id }) {
const item = SETTINGS_NAV.flatMap(g => g.items).find(it => it.id === id);
const label = item ? item.label : id;
return (
);
}
function App() {
// Deep-link support: ?section=slack pins a starting tab; the OAuth
// callback also redirects with ?slack=connected|error, which should
// surface the Slack panel since that's the action just taken.
const [active, setActive] = React.useState(() => {
if (typeof window === 'undefined') return 'stores';
const params = new URLSearchParams(window.location.search);
if (params.has('slack')) return 'slack';
if (params.has('square') || params.has('clover') || params.has('shopify') || params.has('lightspeed')) return 'pos';
if (params.has('intuit')) return 'accounting';
if (params.has('deputy')) return 'labor';
if (params.get('section')) return params.get('section');
try {
const saved = window.localStorage.getItem('mise.settings.section');
if (saved) return saved;
} catch (_) { /* private mode etc. */ }
return 'stores';
});
// Persist active tab to both URL and localStorage so refresh / new
// tab restores it. replaceState (not pushState) keeps the back
// button useful — settings tabs aren't worth polluting history.
React.useEffect(() => {
if (typeof window === 'undefined') return;
const params = new URLSearchParams(window.location.search);
if (params.get('section') !== active) {
params.set('section', active);
window.history.replaceState({}, '',
window.location.pathname + '?' + params.toString());
}
try { window.localStorage.setItem('mise.settings.section', active); }
catch (_) { /* private mode etc. */ }
}, [active]);
return (
{active === 'stores' ? }
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
setOpen(false)}
style={{ position: 'fixed', inset: 0, zIndex: 40 }}
/>
);
}
/** Shows every wired POS provider stacked. Square + Clover both cover
* POS and Labor with one OAuth. Unconnected providers are hidden;
* the "Add integration" picker exposes them on demand. */
function PosSettings() {
return
Available providers
{candidates.map(p => (
{heading}
{subCopy} {' '}environment: {status.environment}
{notice.msg}
)}
{statusError && (
Couldn't reach the Clover status endpoint: {statusError}
)}
{/* "Connected merchant(s)" header card — Clover supports multiple
merchants per org, so this stays even when connected. */}
{status.merchantCount} Clover merchant{status.merchantCount === 1 ? '' : 's'} connected
Each Clover merchant ≈ one location. Add another below or in the section's "Add integration" picker.
Sales sync
{syncStatus?.lastSyncedAt
? <>Last synced {new Date(syncStatus.lastSyncedAt).toLocaleString()} through {syncStatus.lastSyncThrough} · status: {syncStatus.lastStatus}{syncStatus.lastError ? ` (${syncStatus.lastError})` : ''}
: 'Never synced. Map at least one merchant below, then click Sync now.'}
Map Clover merchants to Mise stores
Each Clover merchant maps to one Mise store. Unmapped merchants are still authorized but won't surface anywhere yet.
Loading merchants…
)}
{locsError && (
Couldn't fetch merchants: {locsError}
)}
{!locsLoading && !locsError && locations.length === 0 && (
No Clover merchants on this org.
)}
{locations.map(l => (
{l.name || l.id}
{l.address || '—'} · {l.id}
Accounting · QuickBooks
Pull P&L, COGS, and labor expense from each connected QuickBooks company. Most franchisees keep one company per location — map each company to a Mise store. {' '}environment: {status.environment}
{notice.msg}
)}
{statusError && (
Couldn't reach the Intuit status endpoint: {statusError}
)}
{status.realmCount} QuickBooks compan{status.realmCount === 1 ? 'y' : 'ies'} connected
Each QuickBooks company is its own install. Add another below or via the section's "Add integration" picker.
P&L sync
{syncStatus?.lastSyncedAt
? <>Last synced {new Date(syncStatus.lastSyncedAt).toLocaleString()} through {syncStatus.lastSyncThrough} · status: {syncStatus.lastStatus}{syncStatus.lastError ? ` (${syncStatus.lastError})` : ''}
: 'Never synced. Map at least one company below, then click Sync now to pull the trailing 13 months of P&L.'}
Map QuickBooks companies to Mise stores
Each connected company maps to one Mise store. Unmapped companies still authenticate but won't surface anywhere yet.
Loading companies…
)}
{locsError && (
Couldn't fetch companies: {locsError}
)}
{!locsLoading && !locsError && locations.length === 0 && (
No QuickBooks companies on this org.
)}
{locations.map(l => (
{l.name || l.id}
realm: {l.id}
Loading Lightspeed…
POS · Lightspeed Retail
Connect each Lightspeed retailer (X-Series) to pull sales, outlets, and inventory into Mise. {' '}environment: {status.environment}
{notice.msg}
)}
{!status.configured && (
Lightspeed credentials not set on the server
An admin needs to add
copilot.lightspeed.application-id and
application-secret to the server's environment.
{retailers.map(r => (
))}
)}
{/* Connect form */}
{status.configured && (!showForm ? (
) : (
{r.retailerName || r.domainPrefix}
{r.domainPrefix}.retail.lightspeed.app
Connect a Lightspeed retailer
Enter your retailer's domain prefix — the part before
.retail.lightspeed.app.
For acme.retail.lightspeed.app, type acme.
{retailers.length > 0 && (
)}
Sales + inventory sync
{syncStatus?.lastSyncedAt
? <>Last synced {new Date(syncStatus.lastSyncedAt).toLocaleString()} through {syncStatus.lastSyncThrough} · status: {syncStatus.lastStatus}{syncStatus.lastError ? ` (${syncStatus.lastError})` : ''}
: 'Never synced. Map at least one outlet below, then click Sync now to pull sales and inventory.'}
Map Lightspeed outlets to Mise stores
X-series calls each physical location an "outlet". Map each to a Mise store.
Loading outlets…
)}
{outletsError && (
Couldn't fetch outlets: {outletsError}
)}
{!outletsLoading && !outletsError && outlets.length === 0 && (
No outlets on these retailers.
)}
{outlets.map(l => (
{l.name}
{l.address || '—'} · {l.domainPrefix} · {l.id}
Loading Shopify…
POS · Shopify
Connect each Shopify shop to pull orders, inventory, and locations into Mise. {' '}environment: {status.environment} · API: {status.connected ? '2024-10' : '—'}
{notice.msg}
)}
{!status.configured && (
Shopify credentials not set on the server
An admin needs to add
copilot.shopify.client-id and
client-secret to the server's environment.
{shops.map(s => (
))}
)}
{/* Connect form */}
{status.configured && (!showForm ? (
) : (
{s.shopName || s.shopDomain}
{s.shopDomain}
Connect a Shopify shop
Enter the shop domain (e.g.
mise-test.myshopify.com or just mise-test). You'll be redirected to Shopify to authorize Mise on that shop.
{shops.length > 0 && (
)}
Sales + inventory sync
{syncStatus?.lastSyncedAt
? <>Last synced {new Date(syncStatus.lastSyncedAt).toLocaleString()} through {syncStatus.lastSyncThrough} · status: {syncStatus.lastStatus}{syncStatus.lastError ? ` (${syncStatus.lastError})` : ''}
: 'Never synced. Map at least one location below, then click Sync now to pull orders and inventory.'}
Map Shopify locations to Mise stores
Each Shopify location maps to one Mise store. Locations across multiple shops are listed together.
Loading locations…
)}
{locsError && (
Couldn't fetch locations: {locsError}
)}
{!locsLoading && !locsError && locations.length === 0 && (
No Shopify locations on these shops.
)}
{locations.map(l => (
{l.name}
{l.address || '—'} · {l.shopDomain} · {l.id}
Loading Deputy…
Labor & Scheduling · Deputy
Deputy uses a per-tenant OAuth model — each customer admin creates their own OAuth client inside
their Deputy workspace and gives Mise the credentials. We never share a marketplace app.
{' '}
{notice.msg}
)}
{!status?.encryptionReady && (
Master encryption key isn't configured. Set
)}
{/* Subdomain rows */}
{subdomains.length > 0 && (
copilot.crypto.master-key on the server before saving any Deputy credentials.
{subdomains.map(s => (
{s.authorized && (
))}
)}
))}
)}
{/* Add-subdomain CTA / setup form */}
{!showForm ? (
) : (
{s.companyName || s.subdomain}
{s.subdomain} · client_id: {s.clientId} · secret: ••••••••{' '}
{status?.encryptionReady ? '🔒 encrypted' : '🔒 enc disabled'}
{!s.authorized && (
)}
Map Deputy locations on this subdomain to Mise stores.
{(!locsBySub[s.subdomain]) && (
Loading locations…
)}
{locsBySub[s.subdomain]?.error && (
Couldn't fetch locations: {locsBySub[s.subdomain].error}
)}
{Array.isArray(locsBySub[s.subdomain]) && locsBySub[s.subdomain].length === 0 && (
No locations on this Deputy account.
)}
{Array.isArray(locsBySub[s.subdomain]) && locsBySub[s.subdomain].map(l => (
{l.name || l.id}
{l.address || '—'} · {l.id}
Configure a Deputy subdomain
In your Deputy account go to
/exec/devapp/oauth_clients,
create a new OAuth client with redirect URI http://localhost:8080/deputy/callback,
then paste its client_id and client_secret below. The secret is encrypted before it's stored.
Rule Library
Couldn't load rules: {error}
Rule Library
Loading rules…
Rule Library
The conditions Mise watches for across your warehouse data and brand playbook. Each rule packages real numbers from a store into a scenario, then the AI auditor compares it against your indexed SOPs and writes a finding with citations. New rules appear here automatically when shipped.
{rules.length} active rule{rules.length === 1 ? '' : 's'} across {orderedCats.length} categor{orderedCats.length === 1 ? 'y' : 'ies'}.
Per-org enable/disable toggles land in a follow-up; today every rule runs every scan.
{orderedCats.map(cat => (
{cat} · {groups[cat].length}
{groups[cat].map((r, idx) => (
{blocks.map((b, i) => {
if (b.kind === 'h') {
return (
);
}
function BriefSettings() {
const [cfg, setCfg] = React.useState(null);
const [error, setError] = React.useState(null);
const [saving, setSaving] = React.useState(false);
const [latest, setLatest] = React.useState(null);
const [latestState, setLatestState] = React.useState('loading'); // 'loading' | 'empty' | 'ok' | 'error'
const [running, setRunning] = React.useState(false);
const [refreshingLatest, setRefreshingLatest] = React.useState(false);
const [lastCheckedAt, setLastCheckedAt] = React.useState(null);
const [users, setUsers] = React.useState([]);
// Initial config load.
React.useEffect(() => {
fetch(`${SETTINGS_API_BASE}/settings/daily-brief`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : Promise.reject(new Error(`${r.status}`)))
.then(d => setCfg({
enabled: d.enabled !== false,
timeOfDay: (d.timeOfDay || '06:30').slice(0, 5),
timezone: d.timezone || 'America/New_York',
leadBelow: d.leadBelow ?? 70,
watchBelow: d.watchBelow ?? 80,
tone: d.tone || 'concise',
recipients: Array.isArray(d.recipients) ? d.recipients : [],
slackEnabled: d.slackEnabled === true,
slackChannel: d.slackChannel || '',
}))
.catch(e => setError(e.message || String(e)));
}, []);
// Slack channels — only fetched after the toggle is on so we don't
// hit Slack on every page load. Empty list when no workspace is
// connected (Slack call returns 4xx, swallowed below).
const [slackChannels, setSlackChannels] = React.useState(null);
React.useEffect(() => {
if (!cfg || !cfg.slackEnabled || slackChannels !== null) return;
fetch(`${SETTINGS_API_BASE}/slack/channels`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : [])
.then(setSlackChannels)
.catch(() => setSlackChannels([]));
}, [cfg && cfg.slackEnabled, slackChannels]);
// Latest brief preview. The button feels like a no-op when nothing
// has changed (same brief comes back), so surface a "checked at"
// timestamp + a brief busy state so the click has visible effect.
const refreshLatest = React.useCallback(() => {
setRefreshingLatest(true);
fetch(`${SETTINGS_API_BASE}/daily-brief/latest`, { cache: 'no-store' })
.then(r => {
if (r.status === 204) { setLatest(null); setLatestState('empty'); return null; }
if (!r.ok) return Promise.reject(new Error(`${r.status}`));
return r.json();
})
.then(d => { if (d) { setLatest(d); setLatestState('ok'); } })
.catch(e => { setError(e.message || String(e)); setLatestState('error'); })
.finally(() => {
setLastCheckedAt(new Date());
setRefreshingLatest(false);
});
}, []);
// Initial load: lighter state — show 'loading' so the empty/error
// panes don't flash before the first response lands.
React.useEffect(() => {
setLatestState('loading');
}, []);
React.useEffect(refreshLatest, [refreshLatest]);
// User options for the recipients picker.
React.useEffect(() => {
if (window.MISE && window.MISE.fetchUsersCached) {
window.MISE.fetchUsersCached().then(setUsers);
} else {
fetch(`${SETTINGS_API_BASE}/users`, { cache: 'no-store' })
.then(r => r.ok ? r.json() : [])
.then(setUsers)
.catch(() => setUsers([]));
}
}, []);
const update = (k) => (e) => {
const v = e && e.target ? (e.target.type === 'checkbox' ? e.target.checked : e.target.value) : e;
setCfg(prev => ({ ...prev, [k]: v }));
};
const updateNum = (k) => (e) => setCfg(prev => ({ ...prev, [k]: Number(e.target.value) }));
async function save() {
if (!cfg) return;
setSaving(true);
setError(null);
try {
const res = await fetch(`${SETTINGS_API_BASE}/settings/daily-brief`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
enabled: cfg.enabled,
timeOfDay: cfg.timeOfDay,
timezone: cfg.timezone,
leadBelow: cfg.leadBelow,
watchBelow: cfg.watchBelow,
tone: cfg.tone,
recipients: cfg.recipients,
slackEnabled: cfg.slackEnabled,
slackChannel: cfg.slackChannel || null,
}),
});
if (!res.ok) {
const txt = await res.text();
throw new Error(txt || `Save failed (${res.status})`);
}
const d = await res.json();
setCfg({
enabled: d.enabled !== false,
timeOfDay: (d.timeOfDay || '06:30').slice(0, 5),
timezone: d.timezone || 'America/New_York',
leadBelow: d.leadBelow ?? 70,
watchBelow: d.watchBelow ?? 80,
tone: d.tone || 'concise',
recipients: Array.isArray(d.recipients) ? d.recipients : [],
slackEnabled: d.slackEnabled === true,
slackChannel: d.slackChannel || '',
});
} catch (e) {
setError(e.message || String(e));
} finally {
setSaving(false);
}
}
async function runNow() {
setRunning(true);
setError(null);
try {
const res = await fetch(`${SETTINGS_API_BASE}/daily-brief/run-now`, { method: 'POST' });
if (!res.ok) throw new Error(`${res.status}`);
const d = await res.json();
setLatest(d);
setLatestState('ok');
} catch (e) {
setError(e.message || String(e));
} finally {
setRunning(false);
}
}
if (error && !cfg) {
return (
{inline(b.text)}
);
}
if (b.kind === 'ul') {
return (
-
{b.items.map((it, j) => (
- {inline(it)} ))}
{inline(b.text)}
); })}Daily Brief Schedule
Couldn't load settings: {error}
Daily Brief Schedule
Loading…
Daily Brief Schedule
The morning brief composes a prioritized summary of last night's alerts, lowest-scoring stores, and a generalized rollup of the rest. Priorities are anchored by the thresholds below — the LLM renders the prose but doesn't decide what's urgent.
{error}
)}
{/* Schedule */}
{/* Prioritization */}
{/* Recipients */}
{/* Slack delivery */}
)}
{/* Latest brief preview */}
)}
Schedule
Prioritization
Mirrors the alert rule severity model. Stores with critical alerts always surface in the lead bucket regardless of composite. Below "Lead threshold" forces a store into lead even without an active alert. Between thresholds is the watch list. Above "Watch threshold" is rolled up into a single line.
Recipients
The brief is always viewable in-app. Recipients are the users expected to act on it; today this list is informational — email/Slack delivery lands in a follow-up.
{users.length === 0 ? (No users yet — add some in Users & Roles.
) : (
{users.map(u => {
const checked = (cfg.recipients || []).includes(u.id);
return (
);
})}
)}
Slack delivery
Off by default. When enabled, the brief posts to the chosen channel each time it generates — manual sends and the daily scheduled run both go through. Slack must already be connected for the org (Settings → Integrations).
{/* Big, obvious switch + status pill so the on/off state is unmistakable and the user knows clicking flips it. */} !saving && setCfg(prev => ({ ...prev, slackEnabled: !prev.slackEnabled }))}
role="switch"
aria-checked={cfg.slackEnabled}
tabIndex={saving ? -1 : 0}
onKeyDown={(e) => {
if (saving) return;
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
setCfg(prev => ({ ...prev, slackEnabled: !prev.slackEnabled }));
}
}}
style={{
display: 'flex', alignItems: 'center', gap: 14,
padding: '12px 16px', borderRadius: 10,
border: '1px solid ' + (cfg.slackEnabled ? 'var(--accent)' : 'var(--hair)'),
background: cfg.slackEnabled ? 'rgba(200,85,61,.06)' : 'var(--bg-2)',
cursor: saving ? 'wait' : 'pointer',
userSelect: 'none',
transition: 'background .15s, border-color .15s',
}}
>
{/* Visual switch */}
{cfg.slackEnabled ? 'On' : 'Off'}
{cfg.slackEnabled && (
{cfg.slackEnabled ? 'On — posting briefs to Slack' : 'Off — click to enable Slack delivery'}
{cfg.slackEnabled
? 'Each generated brief posts to the channel selected below. Remember to click Save changes.'
: 'Briefs are still generated and viewable in-app; only Slack delivery is paused.'}
Channel
{Array.isArray(slackChannels) && slackChannels.length > 0 ? (
) : (
)}
{slackChannels !== null && slackChannels.length === 0 && (
Slack workspace not detected — paste a channel id manually,
or connect Slack in Integrations → Slack.
)}
Latest brief
{latestState === 'loading' && Loading…
}
{latestState === 'empty' && (
No brief generated yet. The first run will fire at the scheduled time —
or click "Send test brief" to compose one now.
)}
{latestState === 'ok' && latest && (
{latest.generatedForDate} · {latest.trigger}
{latest.generatedAt && (
{new Date(latest.generatedAt).toLocaleString()}
)}
{lastCheckedAt && (
checked {lastCheckedAt.toLocaleTimeString()}
)}
{rule.name}
{rule.id}
{rule.description || '(no description provided)'}
{hasDetails && (
)}
Active
{rule.requiresProvider && (
needs {rule.requiresProvider}
)}
{rule.details && rule.details.split('\n').map((line, i) => {
const trimmed = line.trim();
if (!trimmed) return ;
// Lines that look like section headers (no period, capitalized,
// < 60 chars) get a bolder treatment.
const isHeader = trimmed.length < 60 && /^[A-Z]/.test(trimmed) && !trimmed.endsWith('.');
return (
)}
)}
{trimmed}
);
})}
{Array.isArray(rule.exampleFindings) && rule.exampleFindings.length > 0 && (
Example findings
-
{rule.exampleFindings.map((ex, i) => (
- {ex} ))}
These are illustrative — actual findings depend on what's in your indexed playbook.
{label}
This settings panel hasn't been built yet. Pick a real section in the sidebar — Stores is fully wired.
{label}
Coming soon.