126 lines
9.0 KiB
TypeScript
126 lines
9.0 KiB
TypeScript
import { DeesElement, property, state, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
|
|
import { actionButton, demoDocuments, icon, pill, requestWorkspaceView, topBar, workspaceBaseStyles, type IDocumentRow, type TDensity } from './sdig-workspace.shared.js';
|
|
import { workspaceDemoFrame } from './sdig-workspace.shared.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sdig-workspace-inbox': SdigWorkspaceInbox;
|
|
}
|
|
}
|
|
|
|
@customElement('sdig-workspace-inbox')
|
|
export class SdigWorkspaceInbox extends DeesElement {
|
|
public static demo = () => workspaceDemoFrame(html`<sdig-workspace-inbox></sdig-workspace-inbox>`);
|
|
public static demoGroups = ['Signature Digital Workspace'];
|
|
|
|
@property({ type: String }) public accessor density: TDensity = 'comfortable';
|
|
@property({ attribute: false }) public accessor documents: IDocumentRow[] = demoDocuments;
|
|
@state() private accessor filter: string = 'all';
|
|
@state() private accessor search: string = '';
|
|
|
|
public static styles = [workspaceBaseStyles, css`
|
|
.filterbar { padding: 14px 24px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 8px; }
|
|
.searchbox { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 32px; width: 280px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; }
|
|
.searchbox input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 12px; }
|
|
.segmented { display: flex; gap: 2px; padding: 2px; background: var(--bg-el); border-radius: 6px; border: 1px solid var(--border-subtle); }
|
|
.segmented button { padding: 4px 10px; font-size: 11px; font-weight: 500; border-radius: 4px; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
|
|
.segmented button.active { background: var(--bg-card); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
|
|
.doc-table { min-width: 880px; }
|
|
.doc-head, .doc-row { display: grid; grid-template-columns: 32px minmax(220px,2.4fr) 150px 160px 90px 60px 32px; align-items: center; gap: 14px; padding: 0 16px; }
|
|
.doc-head { height: 36px; border-bottom: 1px solid var(--border-subtle); color: var(--text-dim); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
|
|
.doc-row { height: 60px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 0.1s ease; }
|
|
.doc-row.compact { height: 48px; }
|
|
.doc-row:last-child { border-bottom: 0; }
|
|
.doc-row:hover { background: var(--row-hover); }
|
|
.doc-icon { width: 28px; height: 32px; border-radius: 4px; background: var(--bg-input); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
|
|
.doc-title { font-size: 13px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.doc-meta { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
|
|
.recipient-stack { display: flex; align-items: center; }
|
|
.recipient-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-input); border: 1.5px solid var(--border); margin-left: -6px; font-size: 9px; font-weight: 600; color: var(--text-sec); display: flex; align-items: center; justify-content: center; }
|
|
.recipient-dot:first-child { margin-left: 0; }
|
|
.recipient-dot.signed { border-color: var(--success); color: var(--success); background: var(--bg-el); }
|
|
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
|
|
.metric-card { padding: 16px; }
|
|
.metric-value { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
|
|
@media (max-width: 920px) { .filterbar { padding: 12px 16px; display: block; } .searchbox { width: 100%; margin-bottom: 10px; } .stats-grid { grid-template-columns: 1fr; } }
|
|
`];
|
|
|
|
private get filteredDocuments(): IDocumentRow[] {
|
|
return this.documents
|
|
.filter((doc) => this.filter === 'all' || doc.status === this.filter)
|
|
.filter((doc) => !this.search || doc.title.toLowerCase().includes(this.search.toLowerCase()));
|
|
}
|
|
|
|
private statusPill(status: IDocumentRow['status']): TemplateResult {
|
|
const map = {
|
|
awaiting: ['warning', 'awaiting signature'],
|
|
signed: ['success', 'completed'],
|
|
draft: ['default', 'draft'],
|
|
declined: ['error', 'declined'],
|
|
} as const;
|
|
const [tone, label] = map[status];
|
|
return pill(label, tone, true);
|
|
}
|
|
|
|
private openDocument(doc: IDocumentRow) {
|
|
this.dispatchEvent(new CustomEvent('document-open', {
|
|
detail: { document: doc },
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
requestWorkspaceView(this, doc.status === 'signed' ? 'audit' : 'sign');
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
const documents = this.documents;
|
|
const filters = [
|
|
{ id: 'all', label: 'All', count: documents.length },
|
|
{ id: 'awaiting', label: 'Awaiting', count: documents.filter((doc) => doc.status === 'awaiting').length },
|
|
{ id: 'signed', label: 'Completed', count: documents.filter((doc) => doc.status === 'signed').length },
|
|
{ id: 'draft', label: 'Drafts', count: documents.filter((doc) => doc.status === 'draft').length },
|
|
{ id: 'declined', label: 'Declined', count: documents.filter((doc) => doc.status === 'declined').length },
|
|
];
|
|
const attentionCount = documents.filter((doc) => doc.status === 'awaiting').length;
|
|
|
|
return html`
|
|
${topBar({
|
|
breadcrumb: ['signature.digital', 'Lossless GmbH', 'Inbox'],
|
|
title: 'Inbox',
|
|
subtitle: pill(`${attentionCount} need attention`, 'info'),
|
|
actions: html`${actionButton('Import', 'outline', 'upload')}${actionButton('New document', 'primary', 'plus', () => requestWorkspaceView(this, 'compose'))}`,
|
|
})}
|
|
<div class="filterbar">
|
|
<div class="searchbox">${icon('search', 13)}<input .value=${this.search} @input=${(event: Event) => this.search = (event.target as HTMLInputElement).value} placeholder="Search documents, recipients, IDs..." /><span class="mono" style="font-size: 10px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px;">⌘K</span></div>
|
|
<div style="flex: 1;"></div>
|
|
<div class="segmented">${filters.map((filter) => html`<button class=${this.filter === filter.id ? 'active' : ''} @click=${() => this.filter = filter.id}>${filter.label}<span class="mono" style="color: var(--text-dim);">${filter.count}</span></button>`)}</div>
|
|
</div>
|
|
<div class="content-scroll">
|
|
<div class="card" style="overflow-x: auto;">
|
|
<div class="doc-table">
|
|
<div class="doc-head"><span></span><span>Document</span><span>Status</span><span>Recipients</span><span>Deadline</span><span style="text-align: right;">Pages</span><span></span></div>
|
|
${this.filteredDocuments.map((doc) => html`
|
|
<div class="doc-row ${this.density === 'compact' ? 'compact' : ''}" @click=${() => this.openDocument(doc)}>
|
|
<div class="doc-icon">${icon('file', 14)}</div>
|
|
<div style="min-width: 0;"><div class="doc-title">${doc.title}</div><div class="doc-meta mono">${doc.id} · ${doc.sender} · ${doc.updated}</div></div>
|
|
<div>${this.statusPill(doc.status)}</div>
|
|
<div style="display: flex; align-items: center; gap: 8px;"><div class="recipient-stack">${doc.recipients.slice(0, 4).map((recipient) => html`<span class="recipient-dot ${recipient.signed ? 'signed' : ''}" title=${recipient.name}>${recipient.initials}</span>`)}</div><span style="font-size: 11px; color: var(--text-muted);">${doc.recipients.filter((recipient) => recipient.signed).length}/${doc.recipients.length}</span></div>
|
|
<div class="mono" style="font-size: 11px; color: ${doc.deadline && doc.status === 'awaiting' ? 'var(--warning)' : 'var(--text-dim)'};">${doc.deadline ? html`${icon('clock', 11)} ${doc.deadline}` : '—'}</div>
|
|
<div class="mono" style="font-size: 11px; color: var(--text-muted); text-align: right;">${doc.pages}</div>
|
|
<div>${icon('more', 14)}</div>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
</div>
|
|
<div class="stats-grid">
|
|
${[
|
|
{ label: 'Sent this month', value: '127', delta: '+24%', icon: 'send' },
|
|
{ label: 'Avg time to sign', value: '4.2h', delta: '-18%', icon: 'clock' },
|
|
{ label: 'Completion rate', value: '94.1%', delta: '+2.1%', icon: 'check' },
|
|
{ label: 'API signatures', value: '2,481', delta: '+312', icon: 'code' },
|
|
].map((metric) => html`<div class="card metric-card"><div style="display: flex; justify-content: space-between; margin-bottom: 12px;">${icon(metric.icon, 14)}<span class="mono" style="font-size: 10px; color: var(--success);">${metric.delta}</span></div><div class="metric-value">${metric.value}</div><div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">${metric.label}</div></div>`)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|