/* ---------- Document Vault ---------- */ function DocumentVault({ onNav }) { const isLoggedIn = window.API && API.isLoggedIn(); const [filter, setFilter] = React.useState("all"); const [statusFilter, setStatusFilter] = React.useState("all"); const [search, setSearch] = React.useState(""); const [allDocs, setAllDocs] = React.useState([]); const [uploading, setUploading] = React.useState(false); const [error, setError] = React.useState(null); const fileInputRef = React.useRef(); React.useEffect(() => { if (!isLoggedIn) return; API.getDocuments().then(docs => { setAllDocs(docs || []); }).catch(() => {}); }, []); const handleFileChange = async (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; if (!isLoggedIn) { setError("Sign in to upload documents."); e.target.value = ""; return; } setUploading(true); setError(null); try { const raw = await API.uploadDocument(file, "Other", file.name); const doc = window.normalizeDoc ? window.normalizeDoc(raw) : raw; setAllDocs(d => [...d, doc]); window.toast && toast(`Uploaded · classified as ${doc.category}`); } catch (err) { setError(err.message || "Upload failed. Please try again."); } finally { setUploading(false); e.target.value = ""; } }; const downloadDoc = async (d) => { if (!isLoggedIn || !d.id) { window.toast && toast("Sign in to download."); return; } try { const b = await API.downloadDocumentFile(d.id); window.downloadBlob(b, d.name || "document"); } catch { window.toast && toast("Could not download this document."); } }; const deleteDoc = async (d) => { if (!isLoggedIn || !d.id) return; try { await API.deleteDocument(d.id); setAllDocs(list => list.filter(x => x.id !== d.id)); window.toast && toast("Document deleted"); } catch { window.toast && toast("Could not delete."); } }; const catIds = ["all","CSD","Tax","B-BBEE","CIPC","Insurance","Bank Letter","SBD Forms","Capability"]; const categories = catIds.map(id => ({ id, label: id === "all" ? "All" : id, count: id === "all" ? allDocs.length : allDocs.filter(d => d.category === id).length, })); const STATUS_CYCLE = ["all", "valid", "expiring", "expired", "missing"]; const cycleStatus = () => setStatusFilter(s => STATUS_CYCLE[(STATUS_CYCLE.indexOf(s) + 1) % STATUS_CYCLE.length]); const docs = allDocs .filter(d => filter === "all" || d.category === filter) .filter(d => statusFilter === "all" || d.status === statusFilter) .filter(d => !search || (d.name || "").toLowerCase().includes(search.toLowerCase())); return (
} /> {error && (
{error}
)} {/* Stats */}
d.status === "valid").length)} delta="0" deltaDir="up"/> d.status === "expiring").length)} delta="+2" deltaDir="down"/> d.status === "missing").length)} delta="-1" deltaDir="up"/>
{/* Upload zone */}
Drop documents to upload
PDF, DOCX, JPG up to 25MB · AI auto-classifies, OCRs, and extracts expiry dates
{/* Filter bar */}
setSearch(e.target.value)} style={{ paddingLeft: 32, width: 260 }}/>
{categories.map(c => ( ))}
{/* Document grid */} {docs.length === 0 ? (
{allDocs.length === 0 ? "Your vault is empty" : "No documents match these filters"}
{allDocs.length === 0 ? "Upload your compliance documents — AI auto-classifies them." : "Try clearing the search or status filter."}
{allDocs.length === 0 && ( )}
) : (
{docs.map(d => downloadDoc(d)} onDelete={() => deleteDoc(d)} onUpload={() => fileInputRef.current && fileInputRef.current.click()}/>)}
)}
); } function DocCard({ d, onDownload, onDelete, onUpload }) { const isMissing = d.status === "missing"; return (
{/* Preview */}
{isMissing ? (
No file uploaded
) : ( <>
{Array.from({ length: 6 }).map((_, i) => (
))}
)} {d.aiVerified && ( AI verified )}
{d.category}
{d.name}
{d.vendor &&
{d.vendor}
}
{d.expires ? ( {d.status === "expired" ? "Expired " : d.status === "expiring" ? "Expires " : "Valid until "} {d.expires} ) : No expiry} {d.size && {d.size}}
{isMissing ? ( <> ) : ( <> )}
); } function exportVaultCsv(docs) { if (!docs || docs.length === 0) return; const rows = [["Name", "Category", "Status", "Expires", "Uploaded", "Size", "AI verified"]]; docs.forEach(d => rows.push([ d.name || "", d.category || "", d.status || "", d.expires || "", d.uploaded || "", d.size || "", d.aiVerified ? "yes" : "no", ])); const csv = rows.map(r => r.map(c => `"${String(c).replace(/"/g, '""')}"`).join(",")).join("\n"); const blob = new Blob([csv], { type: "text/csv" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "compliance-vault.csv"; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); } Object.assign(window, { DocumentVault });