401 lines
12 KiB
TypeScript
401 lines
12 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
property,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
import type { ISgDashboardStats, ISgPackage, ISgOrganization } from '../interfaces.js';
|
|
import './sg-protocol-badge.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sg-dashboard-view': SgDashboardView;
|
|
}
|
|
}
|
|
|
|
@customElement('sg-dashboard-view')
|
|
export class SgDashboardView extends DeesElement {
|
|
public static demo = () => html`
|
|
<div style="padding: 24px; max-width: 1200px; background: #09090b;">
|
|
<sg-dashboard-view
|
|
.stats=${{
|
|
organizationCount: 5,
|
|
packageCount: 128,
|
|
totalDownloads: 45230,
|
|
tokenCount: 12,
|
|
}}
|
|
.recentPackages=${[
|
|
{ id: '1', name: '@myorg/web-framework', protocol: 'npm', organizationId: 'org1', repositoryId: 'repo1', latestVersion: '3.2.1', isPrivate: false, downloadCount: 1240, updatedAt: '2026-03-19T10:30:00Z', description: 'Modern web framework' },
|
|
{ id: '2', name: 'myorg/api-gateway', protocol: 'oci', organizationId: 'org1', repositoryId: 'repo2', latestVersion: 'v1.8.0', isPrivate: true, downloadCount: 890, updatedAt: '2026-03-18T14:20:00Z', description: 'API gateway image' },
|
|
{ id: '3', name: 'data-utils', protocol: 'pypi', organizationId: 'org2', repositoryId: 'repo3', latestVersion: '0.9.4', isPrivate: false, downloadCount: 320, updatedAt: '2026-03-17T08:15:00Z' },
|
|
]}
|
|
.organizations=${[
|
|
{ id: 'org1', name: 'myorg', displayName: 'My Organization', isPublic: true, memberCount: 8, createdAt: '2025-06-01' },
|
|
{ id: 'org2', name: 'acme', displayName: 'ACME Corp', isPublic: false, memberCount: 25, createdAt: '2025-01-15' },
|
|
]}
|
|
></sg-dashboard-view>
|
|
</div>
|
|
`;
|
|
|
|
public static demoGroups = ['Dashboard'];
|
|
|
|
@property({ type: Object })
|
|
public accessor stats: ISgDashboardStats = {
|
|
organizationCount: 0,
|
|
packageCount: 0,
|
|
totalDownloads: 0,
|
|
tokenCount: 0,
|
|
};
|
|
|
|
@property({ type: Array })
|
|
public accessor recentPackages: ISgPackage[] = [];
|
|
|
|
@property({ type: Array })
|
|
public accessor organizations: ISgOrganization[] = [];
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
.dashboard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
/* Stats grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1px;
|
|
background: ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
}
|
|
|
|
.stat-card {
|
|
background: ${cssManager.bdTheme('#fff', '#111')};
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
/* Section */
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
.section-action {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 1px solid ${cssManager.bdTheme('#ddd', '#333')};
|
|
padding: 6px 12px;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.section-action:hover {
|
|
border-color: ${cssManager.bdTheme('#999', '#666')};
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
/* Package list */
|
|
.package-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
}
|
|
|
|
.package-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 16px;
|
|
background: ${cssManager.bdTheme('#fff', '#111')};
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
cursor: pointer;
|
|
transition: background 100ms ease;
|
|
}
|
|
|
|
.package-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.package-row:hover {
|
|
background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
|
|
}
|
|
|
|
.package-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.package-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
font-family: 'JetBrains Mono', monospace;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.package-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
}
|
|
|
|
.package-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.package-version {
|
|
font-size: 12px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
|
|
padding: 2px 8px;
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
}
|
|
|
|
.package-downloads {
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* Orgs grid */
|
|
.orgs-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 1px;
|
|
background: ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
}
|
|
|
|
.org-card {
|
|
background: ${cssManager.bdTheme('#fff', '#111')};
|
|
padding: 16px;
|
|
cursor: pointer;
|
|
transition: background 100ms ease;
|
|
}
|
|
|
|
.org-card:hover {
|
|
background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
|
|
}
|
|
|
|
.org-name {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.org-handle {
|
|
font-size: 12px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.org-meta {
|
|
display: flex;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
}
|
|
|
|
/* Quick actions */
|
|
.quick-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.quick-action-btn {
|
|
padding: 8px 16px;
|
|
background: transparent;
|
|
border: 1px solid ${cssManager.bdTheme('#ddd', '#333')};
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#333', '#ddd')};
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.quick-action-btn:hover {
|
|
background: ${cssManager.bdTheme('#111', '#fff')};
|
|
color: ${cssManager.bdTheme('#fff', '#111')};
|
|
border-color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 32px;
|
|
text-align: center;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
font-size: 14px;
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
background: ${cssManager.bdTheme('#fff', '#111')};
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="dashboard">
|
|
<div class="page-title">Dashboard</div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Organizations</div>
|
|
<div class="stat-value">${this.stats.organizationCount}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Packages</div>
|
|
<div class="stat-value">${this.stats.packageCount}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Downloads</div>
|
|
<div class="stat-value">${this.formatNumber(this.stats.totalDownloads)}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">API Tokens</div>
|
|
<div class="stat-value">${this.stats.tokenCount}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-title">Recent Packages</div>
|
|
<button class="section-action" @click=${() => this.navigate('packages')}>View all</button>
|
|
</div>
|
|
${this.recentPackages.length > 0
|
|
? html`
|
|
<div class="package-list">
|
|
${this.recentPackages.map(
|
|
(pkg) => html`
|
|
<div class="package-row" @click=${() => this.navigate('package', pkg.id)}>
|
|
<div class="package-info">
|
|
<div class="package-name">${pkg.name}</div>
|
|
<div class="package-meta">
|
|
<sg-protocol-badge .protocol=${pkg.protocol}></sg-protocol-badge>
|
|
${pkg.description || ''}
|
|
</div>
|
|
</div>
|
|
<div class="package-right">
|
|
${pkg.latestVersion ? html`<span class="package-version">${pkg.latestVersion}</span>` : ''}
|
|
<span class="package-downloads">${this.formatNumber(pkg.downloadCount)} pulls</span>
|
|
</div>
|
|
</div>
|
|
`
|
|
)}
|
|
</div>
|
|
`
|
|
: html`<div class="empty-state">No packages published yet</div>`}
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-title">Organizations</div>
|
|
<button class="section-action" @click=${() => this.navigate('org')}>View all</button>
|
|
</div>
|
|
${this.organizations.length > 0
|
|
? html`
|
|
<div class="orgs-grid">
|
|
${this.organizations.map(
|
|
(org) => html`
|
|
<div class="org-card" @click=${() => this.navigate('org', org.id)}>
|
|
<div class="org-name">${org.displayName}</div>
|
|
<div class="org-handle">@${org.name}</div>
|
|
<div class="org-meta">
|
|
<span>${org.memberCount} members</span>
|
|
<span>${org.isPublic ? 'Public' : 'Private'}</span>
|
|
</div>
|
|
</div>
|
|
`
|
|
)}
|
|
</div>
|
|
`
|
|
: html`<div class="empty-state">No organizations yet</div>`}
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">Quick Actions</div>
|
|
<div class="quick-actions">
|
|
<button class="quick-action-btn" @click=${() => this.navigate('org')}>Browse Organizations</button>
|
|
<button class="quick-action-btn" @click=${() => this.navigate('packages')}>Browse Packages</button>
|
|
<button class="quick-action-btn" @click=${() => this.navigate('tokens')}>Manage Tokens</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private formatNumber(n: number): string {
|
|
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
|
|
if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
|
|
return n.toString();
|
|
}
|
|
|
|
private navigate(type: 'org' | 'package' | 'tokens' | 'packages', id?: string) {
|
|
this.dispatchEvent(
|
|
new CustomEvent('navigate', {
|
|
detail: { type, id },
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
}
|
|
}
|