51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
/**
|
|
* Stats dashboard showing job counts by status.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { JobStatus } from '../../shared/types';
|
|
|
|
interface StatsProps {
|
|
stats: Record<JobStatus, number>;
|
|
}
|
|
|
|
const statConfig: Array<{
|
|
key: JobStatus;
|
|
label: string;
|
|
emoji: string;
|
|
}> = [
|
|
{ key: 'discovered', label: 'Discovered', emoji: '🔍' },
|
|
{ key: 'processing', label: 'Processing', emoji: '⚙️' },
|
|
{ key: 'ready', label: 'Ready', emoji: '✨' },
|
|
{ key: 'applied', label: 'Applied', emoji: '✅' },
|
|
{ key: 'rejected', label: 'Rejected', emoji: '❌' },
|
|
{ key: 'expired', label: 'Expired', emoji: '⏰' },
|
|
];
|
|
|
|
export const Stats: React.FC<StatsProps> = ({ stats }) => {
|
|
const total = Object.values(stats).reduce((a, b) => a + b, 0);
|
|
|
|
return (
|
|
<div className="card" style={{ marginBottom: 'var(--space-6)' }}>
|
|
<div className="card-header">
|
|
<h2>Overview</h2>
|
|
<span style={{ color: 'var(--color-text-muted)', fontSize: '0.875rem' }}>
|
|
{total} total jobs
|
|
</span>
|
|
</div>
|
|
|
|
<div className="stats-grid">
|
|
{statConfig.map(({ key, label, emoji }) => (
|
|
<div key={key} className="stat-card">
|
|
<div className="stat-value">{stats[key] || 0}</div>
|
|
<div className="stat-label">
|
|
<span style={{ marginRight: '4px' }}>{emoji}</span>
|
|
{label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|