// admin-ui-2.jsx — More primitives: section, drawer, employee chip,
// timecard status pill, severity dot, browser-window chrome, sidebar nav.
// ── Section ──────────────────────────────────────────────────
function AdminSection({ title, action, children, style }) {
return (
{title}
{action &&
{action}
}
{children}
);
}
// ── Employee inline chip ─────────────────────────────────────
function EmpChip({ empId, withRole, onClick }) {
const { employees, setEmployeeDrawer } = useAdmin();
const e = employees.find(x => x.id === empId);
if (!e) return —;
return (
);
}
// ── Timecard status pill (workflow-aware) ────────────────────
const TC_STATUS = {
'draft': { label: 'Draft', tone: 'neutral' },
'pending-ops': { label: 'Ops review', tone: 'warn' },
'pending-acct': { label: 'Accounting', tone: 'info' },
'approved': { label: 'Approved', tone: 'good' },
'rejected': { label: 'Rejected', tone: 'bad' },
'paid': { label: 'Paid', tone: 'dark' },
};
function TimecardStatusPill({ status }) {
const s = TC_STATUS[status] || TC_STATUS.draft;
return {s.label};
}
// ── Severity dot ─────────────────────────────────────────────
function SeverityDot({ severity }) {
const c = { critical: 'var(--bad)', high: 'var(--bad)', med: 'var(--warn)', low: 'var(--muted)' }[severity] || 'var(--muted)';
return ;
}
// ── Browser window chrome ────────────────────────────────────
function BrowserWindow({ url = 'console.railflagspro.com', children, scaleToFit = true }) {
const W = 1600, H = 1000;
const [scale, setScale] = useState(1);
useEffect(() => {
if (!scaleToFit) return;
const compute = () => {
const vw = window.innerWidth - 32;
const vh = window.innerHeight - 32;
setScale(Math.min(vw / W, vh / H, 1));
};
compute();
window.addEventListener('resize', compute);
return () => window.removeEventListener('resize', compute);
}, [scaleToFit]);
return (
{/* Title bar */}
{/* Tab bar */}
Operations Console
+ New Tab
{/* Body */}
{children}
);
}
// ── Right-side drawer ────────────────────────────────────────
function Drawer({ open, onClose, title, eyebrow, width = 560, children, footer }) {
if (!open) return null;
return (
{eyebrow &&
{eyebrow}
}
{title}
{children}
{footer && (
{footer}
)}
);
}
// ── Generic dotted progress bar ──────────────────────────────
function ProgressBar({ value, max = 100, tone = 'good', height = 6 }) {
const pct = Math.max(0, Math.min(100, (value / max) * 100));
const color = { good: 'var(--good)', warn: 'var(--warn)', bad: 'var(--bad)', info: 'var(--info)', accent: 'var(--accent)' }[tone] || 'var(--text)';
return (
);
}
// ── Filter chip ──────────────────────────────────────────────
function FilterChip({ active, onClick, children, count }) {
return (
);
}
Object.assign(window, {
AdminSection, EmpChip, TimecardStatusPill, TC_STATUS, SeverityDot,
BrowserWindow, Drawer, ProgressBar, FilterChip,
});