// ===== Casepoint shared UI components ===== function Avatar({ name, initials, hue = 256, size = 32 }){ const ini = initials || (name||"?").split(" ").map(w=>w[0]).slice(0,2).join("").toUpperCase(); return (
{ini}
); } const STATUS_VARS = { entrada: { fg:"var(--st-entrada)", bg:"var(--st-entrada-soft)" }, rep: { fg:"var(--st-rep)", bg:"var(--st-rep-soft)" }, listo: { fg:"var(--st-listo)", bg:"var(--st-listo-soft)" }, salida: { fg:"var(--st-salida)", bg:"var(--st-salida-soft)" }, }; function StatusBadge({ status, size = "md" }){ const s = STATUSES[status]; if(!s) return null; const v = STATUS_VARS[s.color]; const pad = size === "sm" ? "3px 9px" : "5px 11px"; const fs = size === "sm" ? 11.5 : 12.5; return ( {s.label} ); } const PRIO_COLOR = { baja: "oklch(0.6 0.02 262)", normal: "oklch(0.58 0.13 256)", alta: "oklch(0.7 0.15 60)", urgente: "var(--danger)", }; function PriorityTag({ priority }){ const p = PRIORITIES[priority]; if(!p) return null; const c = PRIO_COLOR[priority]; return ( {p.label} ); } function Btn({ children, variant = "primary", size = "md", icon, iconRight, onClick, type = "button", style, disabled, title }){ const sizes = { sm: { padding:"7px 12px", fontSize:13, gap:6, iconSize:15 }, md: { padding:"9px 16px", fontSize:14, gap:7, iconSize:17 }, lg: { padding:"12px 20px", fontSize:15, gap:8, iconSize:19 }, }[size]; const variants = { primary: { background:"var(--accent)", color:"#fff", border:"1px solid var(--accent)", boxShadow:"var(--shadow-sm)" }, secondary: { background:"var(--surface)", color:"var(--ink)", border:"1px solid var(--line)", boxShadow:"var(--shadow-sm)" }, ghost: { background:"transparent", color:"var(--ink-2)", border:"1px solid transparent" }, soft: { background:"var(--accent-soft)", color:"var(--accent-ink)", border:"1px solid transparent" }, danger: { background:"var(--danger-soft)", color:"var(--danger)", border:"1px solid transparent" }, }[variant]; const [hover, setHover] = React.useState(false); return ( ); } function IconBtn({ icon, onClick, title, active, size = 18, badge }){ const [hover, setHover] = React.useState(false); return ( ); } function Card({ children, style, pad = 20, ...rest }){ return (
{children}
); } function DeviceIcon({ type, size = 18 }){ const d = getDevice(type); return ; } function DeviceGlyph({ type, size = 40, hue }){ const d = getDevice(type); return (
); } function Field({ label, children, hint, required, style }){ return ( ); } const inputStyle = { width:"100%", padding:"10px 12px", fontSize:14, color:"var(--ink)", background:"var(--surface)", border:"1px solid var(--line)", borderRadius:10, outline:"none", transition:"border-color .15s, box-shadow .15s", }; function TextInput(props){ const [f, setF] = React.useState(false); return {setF(true);props.onFocus&&props.onFocus(e);}} onBlur={e=>{setF(false);props.onBlur&&props.onBlur(e);}} style={{ ...inputStyle, borderColor: f ? "var(--accent)" : "var(--line)", boxShadow: f ? "0 0 0 3px var(--accent-soft)" : "none", ...props.style }} />; } // Striped placeholder for images the user should provide function Placeholder({ label, w = "100%", h = 80, style }){ return (
{label}
); } function Sparkbars({ values, color = "var(--accent)", h = 36 }){ const max = Math.max(...values, 1); return (
{values.map((v,i)=>(
))}
); } // ===== Unlock credential (PIN / password / pattern) ===== function PatternLock({ value = [], onChange, size = 168, readOnly = false }){ const dots = [0,1,2,3,4,5,6,7,8]; const gap = size / 3; const pos = (i) => ({ x: gap*(i%3) + gap/2, y: gap*Math.floor(i/3) + gap/2 }); function toggle(i){ if(readOnly) return; onChange(value.includes(i) ? value.filter(x=>x!==i) : [...value, i]); } return (
{value.slice(1).map((i,idx)=>{ const a = pos(value[idx]); const b = pos(i); return ; })} {dots.map(i=>{ const on = value.includes(i); const order = value.indexOf(i)+1; const p = pos(i); return ( ); })}
); } function UnlockField({ value, onChange }){ // value: { type:'none'|'code'|'pattern', code:'', pattern:[] } const v = value || { type:"none", code:"", pattern:[] }; const set = (patch) => onChange({ ...v, ...patch }); const TYPES = [["none","Sin bloqueo"],["code","PIN / Contraseña"],["pattern","Patrón"]]; return (
{TYPES.map(([id,l])=>{ const sel = v.type===id; return ( ); })}
{v.type==="code" && ( set({ code:e.target.value })} placeholder="ej. 1234 o contraseña del equipo" style={{ fontFamily:"var(--mono)" }} /> )} {v.type==="pattern" && (
set({ pattern:p })} />
Toca los puntos en el
orden del patrón. {v.pattern.length>0 &&
}
)}
); } // read-only summary used in order detail function UnlockSummary({ unlock }){ const u = unlock || { type:"none" }; const [show, setShow] = React.useState(false); if(u.type==="none" || (u.type==="code" && !u.code) || (u.type==="pattern" && !(u.pattern||[]).length)){ return Sin bloqueo; } return (
{!show ? ( ) : u.type==="code" ? ( {u.code} ) : ( )}
); } // Photo upload slot — reads file as base64 for demo persistence function PhotoSlot({ label, value, onChange, h = 86 }){ const inputRef = React.useRef(null); function pick(e){ const file = e.target.files && e.target.files[0]; if(!file) return; if(!file.type.startsWith("image/")){ return; } const reader = new FileReader(); reader.onload = () => { // downscale to keep localStorage small const img = new Image(); img.onload = () => { const max = 900; let { width, height } = img; if(width > max || height > max){ const r = Math.min(max/width, max/height); width = Math.round(width*r); height = Math.round(height*r); } const cv = document.createElement("canvas"); cv.width = width; cv.height = height; cv.getContext("2d").drawImage(img, 0, 0, width, height); // En modo online sube la foto a R2 y guarda la URL; offline guarda base64. if(window.CP_API && CP_API.online && cv.toBlob){ cv.toBlob(async (blob)=>{ const url = blob ? await CP_API.uploadPhoto(blob) : null; onChange(url || cv.toDataURL("image/jpeg", 0.72)); }, "image/jpeg", 0.72); } else { onChange(cv.toDataURL("image/jpeg", 0.72)); } }; img.src = reader.result; }; reader.readAsDataURL(file); } return (
{value ? (
{label}
{label}
) : ( )}
); } Object.assign(window, { Avatar, StatusBadge, PriorityTag, Btn, IconBtn, Card, DeviceIcon, DeviceGlyph, Field, TextInput, inputStyle, Placeholder, Sparkbars, PRIO_COLOR, STATUS_VARS, PatternLock, UnlockField, UnlockSummary, PhotoSlot, });