import React from "react" import { callAI } from "call-ai" import { ImgVibes } from "img-vibes" import { useFireproof } from "use-fireproof" export default function App() { // --- HOOKS & STATE --- const { useLiveQuery, database } = useFireproof("vault-ledger"); const [entryForm, setEntryForm] = React.useState({ id: '', kind: 'K1', keeper: '', location: '' }); const [transferForm, setTransferForm] = React.useState({ targetId: '', keeper: '', location: '', notes: '' }); const [selectedEntry, setSelectedEntry] = React.useState(null); const [isGenerating, setIsGenerating] = React.useState(false); // Indexes const { docs: entries } = useLiveQuery("type", { key: "entry", descending: true }); // Transfers for selected entry const { docs: selectedTransfers } = useLiveQuery((doc) => doc.type === 'transfer' && doc.entryId === selectedEntry ? doc.ts : null, { descending: true }); // Compute stats const now = Date.now(); const ONE_WEEK = 7 * 24 * 60 * 60 * 1000; const flaggedCount = entries.filter(e => (now - e.lastActivity) > ONE_WEEK).length; // --- HANDLERS --- const handleAddEntry = async (e) => { e.preventDefault(); if (!entryForm.id) return; const ts = Date.now(); await database.put({ _id: `entry-${entryForm.id}`, type: 'entry', entryId: entryForm.id, kind: entryForm.kind, initialKeeper: entryForm.keeper, initialLocation: entryForm.location, currentKeeper: entryForm.keeper, currentLocation: entryForm.location, lastActivity: ts, createdAt: ts }); // Log genesis transfer await database.put({ type: 'transfer', entryId: entryForm.id, fromKeeper: 'SYSTEM', toKeeper: entryForm.keeper, fromLoc: 'REGISTRY', toLoc: entryForm.location, notes: 'Initial Registration', ts: ts }); setEntryForm({ id: '', kind: 'K1', keeper: '', location: '' }); }; const generateDummy = async () => { setIsGenerating(true); try { const resp = await callAI("Generate realism-driven dummy data for a physical security asset registry. Ensure short labels across fields.", { schema: { properties: { id: { type: 'string', description: 'Like V-882, TS-01' }, kind: { type: 'string', enum: ['K1','K2','K3','K4'] }, keeper: { type: 'string', description: 'Agent/Doc name, ex: Dr. Vance' }, location: { type: 'string', description: 'Room, Sector, Box' } } } }); const data = JSON.parse(resp); setEntryForm({ ...data }); } catch (err) { console.error(err); } finally { setIsGenerating(false); } }; const handleAddTransfer = async (e) => { e.preventDefault(); if (!transferForm.targetId) return; // Attempt lookup const idKey = `entry-${transferForm.targetId}`; let doc; try { doc = await database.get(idKey); } catch (err) { alert("Asset ID not found."); return; } const ts = Date.now(); // Update main entry await database.put({ ...doc, currentKeeper: transferForm.keeper, currentLocation: transferForm.location, lastActivity: ts }); // Append log step await database.put({ type: 'transfer', entryId: transferForm.targetId, fromKeeper: doc.currentKeeper, toKeeper: transferForm.keeper, fromLoc: doc.currentLocation, toLoc: transferForm.location, notes: transferForm.notes, ts: ts }); setTransferForm({ targetId: '', keeper: '', location: '', notes: '' }); }; // --- CLASSNAMES --- const c = { page: "relative min-h-screen flex flex-col items-center bg-[oklch(0.96_0.01_90)] text-[oklch(0.15_0.02_280)]", bgWrap: "fixed inset-0 pointer-events-none z-0 opacity-40", container: "w-full max-w-[920px] px-8 py-12 flex flex-col gap-8 z-10", nav: "flex justify-between items-center px-4 py-3 bg-[oklch(1.00_0_0)] border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] shadow-[4px_4px_0px_oklch(0.15_0.02_280)]", navLogoGrid: "flex gap-1", navPill: "px-4 py-1 uppercase font-bold text-xs bg-[oklch(0.96_0.01_90)] border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] shadow-[2px_2px_0px_oklch(0.15_0.02_280)] hover:-translate-y-0.5 hover:-translate-x-0.5 hover:shadow-[3px_3px_0px_oklch(0.15_0.02_280)] transition-all duration-150 active:translate-y-0.5 active:translate-x-0.5 active:shadow-none", hero: "relative p-8 flex flex-col gap-4 bg-[oklch(1.00_0_0)] border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] shadow-[6px_6px_0px_oklch(0.15_0.02_280)] mt-4 overflow-hidden", heroTitle: "text-4xl md:text-5xl uppercase font-bold tracking-tight z-10", statsGrid: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4", statCard: "flex flex-col bg-[oklch(1.00_0_0)] border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] shadow-[4px_4px_0px_oklch(0.15_0.02_280)]", statHeader: "px-3 py-1 text-[0.65rem] uppercase tracking-widest border-b-[3px] border-[oklch(0.15_0.02_280)]", statBody: "p-4 text-3xl font-mono font-bold", statLabel: "text-xs font-sans tracking-wide ml-2 text-[oklch(0.50_0.02_280)]", formGrid: "grid grid-cols-1 md:grid-cols-2 gap-6", cardTop: "p-6 flex flex-col gap-4 bg-[oklch(1.00_0_0)] border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] shadow-[4px_4px_0px_oklch(0.15_0.02_280)]", inputGroup: "flex flex-col gap-1", label: "text-[0.65rem] uppercase tracking-widest text-[oklch(0.50_0.02_280)] font-bold", input: "w-full px-4 py-2 text-sm border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] bg-[oklch(0.96_0.01_90)] focus:outline-none focus:-translate-y-0.5 focus:-translate-x-0.5 focus:shadow-[3px_3px_0px_oklch(0.15_0.02_280)] transition-all duration-150", btnRow: "flex gap-4 mt-4", btnPrimary: "px-6 py-3 uppercase text-sm font-bold flex items-center justify-center gap-2 bg-[oklch(0.55_0.24_28)] text-white border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] shadow-[4px_4px_0px_oklch(0.15_0.02_280)] hover:-translate-y-0.5 hover:-translate-x-0.5 hover:shadow-[6px_6px_0px_oklch(0.15_0.02_280)] active:translate-y-1 active:translate-x-1 active:shadow-none transition-all duration-150 disabled:opacity-75", btnGhost: "px-4 py-2 uppercase text-xs font-bold bg-[oklch(0.85_0.18_85)] border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] shadow-[3px_3px_0px_oklch(0.15_0.02_280)] hover:-translate-y-0.5 hover:-translate-x-0.5 hover:shadow-[4px_4px_0px_oklch(0.15_0.02_280)] active:translate-y-0.5 active:translate-x-0.5 active:shadow-none transition-all duration-150 disabled:opacity-75", tableWrap: "w-full overflow-x-auto bg-[oklch(1.00_0_0)] border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] shadow-[4px_4px_0px_oklch(0.15_0.02_280)] mt-4", table: "w-full text-left border-collapse whitespace-nowrap", th: "px-4 py-3 uppercase text-[0.6rem] tracking-widest border-b-[3px] border-[oklch(0.15_0.02_280)] bg-[oklch(0.96_0.01_90)] font-bold text-[oklch(0.50_0.02_280)]", td: "px-4 py-3 text-sm border-b-[2px] border-[oklch(0.15_0.02_280)/0.2] font-mono group-hover:bg-[oklch(0.85_0.18_85)] transition-colors cursor-pointer", modalOverlay: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-[oklch(0.15_0.02_280)/0.6] backdrop-blur-sm", modalCard: "w-full max-w-lg flex flex-col bg-[oklch(1.00_0_0)] border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] shadow-[8px_8px_0px_oklch(0.15_0.02_280)] animate-pop", modalBar: "px-4 py-3 uppercase text-xs font-bold bg-[oklch(0.52_0.18_255)] text-white border-b-[3px] border-[oklch(0.15_0.02_280)] flex justify-between", modalBody: "p-6 flex flex-col gap-4 max-h-[70vh] overflow-y-auto" }; // --- RENDER --- return ( <>

Custody.Log

Master Ledger

Immutable tracking for high-value physical assets. Log transfers, view complete chain of custody timelines, and monitor dormant objects.

Active Assets

{entries.length} total

Flagged > 7 Days

{flaggedCount} dormant

Register Asset

Asset ID setEntryForm({...entryForm, id: e.target.value})} placeholder="E.g. A-101" required />

Classification

Initial Keeper setEntryForm({...entryForm, keeper: e.target.value})} placeholder="Officer Name / ID" required />

Current Location setEntryForm({...entryForm, location: e.target.value})} placeholder="Vault, Sector, etc." required />

Log Transfer

Target Asset ID setTransferForm({...transferForm, targetId: e.target.value})} placeholder="E.g. A-101" required />

New Keeper setTransferForm({...transferForm, keeper: e.target.value})} placeholder="Agent ID" required />

New Location setTransferForm({...transferForm, location: e.target.value})} placeholder="Destination" required />

Notes (Optional) setTransferForm({...transferForm, notes: e.target.value})} placeholder="Condition, reason..." />

{entries.length === 0 && ( )} {entries.map(entry => { const isFlagged = (now - entry.lastActivity) > ONE_WEEK; return ( setSelectedEntry(entry.entryId)}> ) })}

ID	Cls	Last Activity	Keeper	Location	Status
No Registry Data.
{entry.entryId}	{entry.kind}	{new Date(entry.lastActivity).toLocaleDateString()}	{entry.currentKeeper}	{entry.currentLocation}	{isFlagged ? ( Dormant ) : ( Active )}

{selectedEntry && (

{ if (e.target === e.currentTarget) setSelectedEntry(null); }}>

Manifest: {selectedEntry}

{selectedTransfers.length === 0 &&

No transfers found.

} {selectedTransfers.map((tx, idx) => (

{new Date(tx.ts).toLocaleString()}

{tx.fromKeeper === 'SYSTEM' ? "Registered at" : `Transferred from ${tx.fromLoc} to`} {tx.toLoc}

Logged to {tx.toKeeper}

{tx.notes &&

{tx.notes}

}

))}

)} ); }