Agent Zero
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
/**
|
|
* RecentContactsWidget — shows last 5 contacts (Task 5.25).
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useUnifiedContacts } from '@/api/hooks';
|
|
import { formatDateTime } from '@/utils/date';
|
|
import { Users } from 'lucide-react';
|
|
|
|
export function RecentContactsWidget() {
|
|
const { t } = useTranslation();
|
|
const { data, isLoading, isError } = useUnifiedContacts(1, 5, undefined, undefined);
|
|
|
|
if (isLoading) {
|
|
return <div className="animate-pulse space-y-2" data-testid="recent-contacts-loading">{[...Array(3)].map((_, i) => <div key={i} className="h-4 bg-secondary-100 rounded" />)}</div>;
|
|
}
|
|
|
|
if (isError) {
|
|
return <p className="text-sm text-secondary-500" data-testid="recent-contacts-error">{t('dashboard.widgetError')}</p>;
|
|
}
|
|
|
|
const contacts = data?.items ?? [];
|
|
|
|
if (contacts.length === 0) {
|
|
return <p className="text-sm text-secondary-500" data-testid="recent-contacts-empty">{t('dashboard.noContacts')}</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2" data-testid="recent-contacts-widget">
|
|
{contacts.map((contact) => (
|
|
<div key={contact.id} className="flex items-center gap-2 text-sm">
|
|
<Users className="w-3.5 h-3.5 text-secondary-400" />
|
|
<span className="font-medium text-secondary-800">{contact.displayname}</span>
|
|
{contact.email_1 && <span className="text-secondary-500 truncate">{contact.email_1}</span>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|