living-os-cockpit

repository

loading code, commits, and activity

repositories

loading repo index

#1	'use client';
#2
#3	import type { CSSProperties } from 'react';
#4	import type { ReactNode } from 'react';
#5	import Link from 'next/link';
#6	import { useEffect, useMemo, useState } from 'react';
#7	import { sameOriginFetch } from '@/lib/client-api';
#8	import { BadgeCheck, Download, FileText, IdCard, Landmark, Scale, ShieldCheck, Stamp, Trash2 } from 'lucide-react';
#9	import DocumentSealEmboss, { type SealPlacement } from '@/components/DocumentSealEmboss';
#10
#11	type ProfileResponse = {
#12	displayName?: string;
#13	trust?: {
#14	name?: string;
#15	id?: string \| null;
#16	role?: string \| null;
#17	uccFiling?: string \| null;
#18	filingState?: string \| null;
#19	primaryColor?: string;
#20	secondaryColor?: string;
#21	sealUrl?: string \| null;
#22	};
#23	};
#24
#25	type InstrumentTemplate = {
#26	id: string;
#27	title: string;
#28	description: string;
#29	icon: ReactNode;
#30	placement: SealPlacement;
#31	registryPrefix: string;
#32	sealSize: 'small' \| 'medium' \| 'large';
#33	};
#34
#35	type GeneratedDocument = {
#36	id: string;
#37	templateId: string;
#38	title: string;
#39	trustName: string;
#40	trustId: string;
#41	displayName: string;
#42	registryNumber: string;
#43	generatedAt: string;
#44	createdAt: string;
#45	};
#46
#47	const INSTRUMENTS: InstrumentTemplate[] = [
#48	{
#49	id: 'pmo',
#50	title: 'Private Money Order',
#51	description: 'Top-right gold overlay, matching the PMO reference format.',
#52	icon: <Stamp size={18} />,
#53	placement: 'pmo-top-right',
#54	registryPrefix: 'PMO',
#55	sealSize: 'medium',
#56	},
#57	{
#58	id: 'id-card',
#59	title: 'Private ID Card',
#60	description: 'Front and back card with seal near the signature line.',
#61	icon: <IdCard size={18} />,
#62	placement: 'id-front-bottom-right',
#63	registryPrefix: 'ID',
#64	sealSize: 'small',
#65	},
#66	{
#67	id: 'ucc1',
#68	title: 'UCC-1 Financing Statement',
#69	description: 'Seal settles bottom-center after the secured party signature block.',
#70	icon: <Landmark size={18} />,
#71	placement: 'ucc-bottom-center',
#72	registryPrefix: 'UCC',
#73	sealSize: 'medium',
#74	},
#75	{
#76	id: 'trust-charter',
#77	title: 'Trust Charter',
#78	description: 'Seal rests top-center beneath the House emblem and charter title.',
#79	icon: <ShieldCheck size={18} />,
#80	placement: 'charter-top-center',
#81	registryPrefix: 'CHR',
#82	sealSize: 'medium',
#83	},
#84	{
#85	id: 'bond-certificate',
#86	title: 'Bond Certificate',
#87	description: 'Large central embossing, suitable for certificate-style instruments.',
#88	icon: <BadgeCheck size={18} />,
#89	placement: 'bond-center',
#90	registryPrefix: 'BOND',
#91	sealSize: 'large',
#92	},
#93	{
#94	id: 'notice-dishonor',
#95	title: 'Notice of Commercial Dishonor',
#96	description: 'Bottom-right seal after the signature and certificate of service.',
#97	icon: <Scale size={18} />,
#98	placement: 'dishonor-bottom-right',
#99	registryPrefix: 'NCD',
#100	sealSize: 'medium',
#101	},
#102	{
#103	id: 'affidavit-status',
#104	title: 'Affidavit of Status / Status Correction',
#105	description: 'Header seal treatment shared with sworn identity instruments.',
#106	icon: <FileText size={18} />,
#107	placement: 'affidavit-header',
#108	registryPrefix: 'AOS',
#109	sealSize: 'medium',
#110	},
#111	];
#112
#113	function generatedStamp() {
#114	return new Date().toLocaleString('en-US', {
#115	month: 'short',
#116	day: '2-digit',
#117	year: 'numeric',
#118	hour: '2-digit',
#119	minute: '2-digit',
#120	});
#121	}
#122
#123	function registry(template: InstrumentTemplate, trustId?: string \| null) {
#124	const base = trustId?.replace(/-TRUST-/i, '-') \|\| 'MEMBER';
#125	return `${base}-${template.registryPrefix}-${new Date().getFullYear()}-001`;
#126	}
#127
#128	export default function DocumentsPage() {
#129	const [profile, setProfile] = useState<ProfileResponse \| null>(null);
#130	const [activeTemplate, setActiveTemplate] = useState(INSTRUMENTS[0].id);
#131	const [embossingId, setEmbossingId] = useState<string \| null>(null);
#132	const [generatedAt, setGeneratedAt] = useState<Record<string, string>>({});
#133	const [documents, setDocuments] = useState<GeneratedDocument[]>([]);
#134	const [activeDocumentId, setActiveDocumentId] = useState<string \| null>(null);
#135	const [libraryError, setLibraryError] = useState('');
#136
#137	useEffect(() => {
#138	let alive = true;
#139	sameOriginFetch('/api/profile')
#140	.then(response => response.json())
#141	.then((data: ProfileResponse) => {
#142	if (alive) setProfile(data);
#143	})
#144	.catch(() => {});
#145	return () => {
#146	alive = false;
#147	};
#148	}, []);
#149
#150	useEffect(() => {
#151	let alive = true;
#152	sameOriginFetch('/api/documents')
#153	.then(response => response.json())
#154	.then((data: { documents?: GeneratedDocument[] }) => {
#155	if (alive) {
#156	const next = data.documents ?? [];
#157	setDocuments(next);
#158	setActiveDocumentId(previous => previous ?? next[0]?.id ?? null);
#159	}
#160	})
#161	.catch((error: any) => {
#162	if (alive) setLibraryError(error?.message ?? 'Document library unavailable');
#163	});
#164	return () => {
#165	alive = false;
#166	};
#167	}, []);
#168
#169	const trust = profile?.trust \|\| {};
#170	const displayName = profile?.displayName \|\| 'Member';
#171	const trustName = trust.name \|\| 'Trust Estate Pending';
#172	const trustId = trust.id \|\| 'TRUST-PENDING';
#173	const primary = trust.primaryColor \|\| '#D4AF37';
#174	const secondary = trust.secondaryColor \|\| '#050505';
#175	const activeInstrument = INSTRUMENTS.find(item => item.id === activeTemplate) \|\| INSTRUMENTS[0];
#176	const activeDocument = documents.find(item => item.id === activeDocumentId && item.templateId === activeInstrument.id)
#177	?? documents.find(item => item.templateId === activeInstrument.id)
#178	?? null;
#179	const currentGeneratedAt = activeDocument?.generatedAt \|\| generatedAt[activeInstrument.id] \|\| generatedStamp();
#180	const currentRegistry = activeDocument?.registryNumber \|\| registry(activeInstrument, trust.id);
#181	const style = {
#182	'--instrument-primary': primary,
#183	'--instrument-secondary': secondary,
#184	} as CSSProperties;
#185
#186	const generateInstrument = async (template: InstrumentTemplate) => {
#187	const timestamp = generatedStamp();
#188	const registryNumber = registry(template, trust.id);
#189	setActiveTemplate(template.id);
#190	setGeneratedAt(previous => ({ ...previous, [template.id]: timestamp }));
#191	setEmbossingId(template.id);
#192	window.setTimeout(() => setEmbossingId(null), 950);
#193	setLibraryError('');
#194	try {
#195	const response = await sameOriginFetch('/api/documents', {
#196	method: 'POST',
#197	headers: { 'Content-Type': 'application/json' },
#198	body: JSON.stringify({
#199	templateId: template.id,
#200	title: template.title,
#201	trustName,
#202	trustId,
#203	displayName,
#204	registryNumber,
#205	generatedAt: timestamp,
#206	}),
#207	});
#208	const data = await response.json();
#209	if (!response.ok) throw new Error(data?.error ?? `Document create failed (${response.status})`);
#210	setDocuments(data.documents ?? []);
#211	setActiveDocumentId(data.document?.id ?? null);
#212	} catch (error: any) {
#213	setLibraryError(error?.message ?? 'Document create failed');
#214	}
#215	};
#216
#217	const deleteActiveDocument = async () => {
#218	if (!activeDocument) return;
#219	setLibraryError('');
#220	try {
#221	const response = await sameOriginFetch(`/api/documents?id=${encodeURIComponent(activeDocument.id)}`, { method: 'DELETE' });
#222	const data = await response.json();
#223	if (!response.ok) throw new Error(data?.error ?? `Document delete failed (${response.status})`);
#224	const next = data.documents ?? [];
#225	setDocuments(next);
#226	setActiveDocumentId(next.find((item: GeneratedDocument) => item.templateId === activeInstrument.id)?.id ?? next[0]?.id ?? null);
#227	} catch (error: any) {
#228	setLibraryError(error?.message ?? 'Document delete failed');
#229	}
#230	};
#231
#232	const downloadActiveDocument = () => {
#233	if (!activeDocument) return;
#234	window.location.href = `/api/documents?download=${encodeURIComponent(activeDocument.id)}`;
#235	};
#236
#237	return (
#238	<main className="documents-emboss-page" style={style}>
#239	<header className="documents-emboss-header">
#240	<Link href="/" className="trust-back-link">Back to cockpit</Link>
#241	<div>
#242	<p className="trust-eyebrow">Document Generator</p>
#243	<h1>Seal Embossing Across Sovereign Instruments</h1>
#244	<p>
#245	Generate member instruments with trust-specific registry numbers, timestamps, and seal placement matched
#246	to each document format.
#247	</p>
#248	</div>
#249	<Link href="/documents/affidavit-of-identity" className="documents-affidavit-link">
#250	Affidavit walkthrough
#251	</Link>
#252	</header>
#253
#254	<section className="documents-emboss-grid">
#255	<aside className="instrument-template-list">
#256	{INSTRUMENTS.map(template => (
#257	<button
#258	key={template.id}
#259	type="button"
#260	className={`instrument-template-button ${activeTemplate === template.id ? 'active' : ''}`}
#261	onClick={() => setActiveTemplate(template.id)}
#262	>
#263	<span>{template.icon}</span>
#264	<strong>{template.title}</strong>
#265	<small>{template.description}</small>
#266	</button>
#267	))}
#268
#269	<div className="instrument-library-list">
#270	<div className="profile-section-title">Library</div>
#271	{documents.length > 0 ? documents.slice(0, 12).map(document => (
#272	<button
#273	type="button"
#274	key={document.id}
#275	className={`instrument-library-item ${activeDocumentId === document.id ? 'active' : ''}`}
#276	onClick={() => {
#277	setActiveDocumentId(document.id);
#278	setActiveTemplate(document.templateId);
#279	}}
#280	>
#281	<strong>{document.title}</strong>
#282	<span>{document.registryNumber}</span>
#283	</button>
#284	)) : (
#285	<div className="instrument-library-empty">No instruments generated yet</div>
#286	)}
#287	</div>
#288	</aside>
#289
#290	<section className="instrument-preview-panel">
#291	<div className="instrument-preview-toolbar">
#292	<div>
#293	<p className="trust-eyebrow">Live Instrument Preview</p>
#294	<h2>{activeInstrument.title}</h2>
#295	<span>{trustName} · {currentRegistry}</span>
#296	</div>
#297	<div className="instrument-preview-actions">
#298	<button type="button" onClick={() => generateInstrument(activeInstrument)}>
#299	<Stamp size={17} />
#300	Generate
#301	</button>
#302	<button type="button" onClick={downloadActiveDocument} disabled={!activeDocument} title="Download PDF">
#303	<Download size={17} />
#304	</button>
#305	<button type="button" onClick={deleteActiveDocument} disabled={!activeDocument} title="Delete instrument">
#306	<Trash2 size={17} />
#307	</button>
#308	</div>
#309	</div>
#310	{libraryError && <div className="instrument-library-error">{libraryError}</div>}
#311
#312	<InstrumentPreview
#313	template={activeInstrument}
#314	trustName={trustName}
#315	trustId={trustId}
#316	displayName={displayName}
#317	sealUrl={trust.sealUrl}
#318	registryNumber={currentRegistry}
#319	generatedAt={currentGeneratedAt}
#320	isEmbossing={embossingId === activeInstrument.id}
#321	/>
#322	</section>
#323	</section>
#324	</main>
#325	);
#326	}
#327
#328	function InstrumentPreview({
#329	template,
#330	trustName,
#331	trustId,
#332	displayName,
#333	sealUrl,
#334	registryNumber,
#335	generatedAt,
#336	isEmbossing,
#337	}: {
#338	template: InstrumentTemplate;
#339	trustName: string;
#340	trustId: string;
#341	displayName: string;
#342	sealUrl?: string \| null;
#343	registryNumber: string;
#344	generatedAt: string;
#345	isEmbossing: boolean;
#346	}) {
#347	if (template.id === 'id-card') {
#348	return (
#349	<div className="instrument-id-pair">
#350	<div className="instrument-id-card front">
#351	<h3>Private Identification Card</h3>
#352	<div className="instrument-id-photo">{displayName.split(/\s+/).slice(0, 2).map(part => part[0]).join('')}</div>
#353	<p>{displayName}</p>
#354	<span>{trustName}</span>
#355	<DocumentSealEmboss
#356	sealUrl={sealUrl}
#357	trustName={trustName}
#358	registryNumber={registryNumber}
#359	placement={template.placement}
#360	size={template.sealSize}
#361	active={isEmbossing}
#362	/>
#363	</div>
#364	<div className="instrument-id-card back">
#365	<h3>{trustId}</h3>
#366	<p>Trust Authority · Private Capacity · All Rights Reserved</p>
#367	<span>{generatedAt}</span>
#368	<div className="instrument-id-watermark">{trustName}</div>
#369	</div>
#370	</div>
#371	);
#372	}
#373
#374	return (
#375	<article className={`instrument-paper instrument-${template.id}`}>
#376	{template.placement === 'charter-top-center' && (
#377	<DocumentSealEmboss
#378	sealUrl={sealUrl}
#379	trustName={trustName}
#380	registryNumber={registryNumber}
#381	generatedAt={generatedAt}
#382	placement={template.placement}
#383	size={template.sealSize}
#384	active={isEmbossing}
#385	/>
#386	)}
#387
#388	<header>
#389	<p>{trustName}</p>
#390	<h3>{template.title}</h3>
#391	<span>{registryNumber}</span>
#392	</header>
#393
#394	{template.placement !== 'charter-top-center' && (
#395	<DocumentSealEmboss
#396	sealUrl={sealUrl}
#397	trustName={trustName}
#398	registryNumber={registryNumber}
#399	generatedAt={generatedAt}
#400	placement={template.placement}
#401	size={template.sealSize}
#402	active={isEmbossing}
#403	/>
#404	)}
#405
#406	<div className="instrument-body-copy">
#407	<Line label="Trust Registry" value={trustId} />
#408	<Line label="Authorized Representative" value={displayName} />
#409	<Line label="Generation Timestamp" value={generatedAt} />
#410	{template.id === 'pmo' && <Line label="Payee / Obligor" value="Tesla Inc. reference format" />}
#411	{template.id === 'ucc1' && <Line label="Secured Party" value={`${displayName}, secured party`} />}
#412	{template.id === 'bond-certificate' && <Line label="Bond Capacity" value="Private estate obligation certificate" />}
#413	{template.id === 'notice-dishonor' && <Line label="Notice Position" value="Commercial dishonor after unrebutted presentment" />}
#414	{template.id === 'affidavit-status' && <Line label="Status Correction" value="Living standing and reserved rights declaration" />}
#415	</div>
#416
#417	<footer>
#418	<span>{trustName}</span>
#419	<span>{registryNumber}</span>
#420	<span>{generatedAt}</span>
#421	</footer>
#422	</article>
#423	);
#424	}
#425
#426	function Line({ label, value }: { label: string; value: string }) {
#427	return (
#428	<div className="instrument-line">
#429	<strong>{label}</strong>
#430	<span>{value}</span>
#431	</div>
#432	);
#433	}
#434

z6Mku78K/living-os-cockpit