final polish phase 1
This commit is contained in:
IGNY8 VPS (Salman)
163
frontend/src/components/dashboard/NeedsAttentionBar.tsx
Normal file
163
frontend/src/components/dashboard/NeedsAttentionBar.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
/**
|
||||
* NeedsAttentionBar - Collapsible alert bar for items requiring user action
|
||||
* Shows pending reviews, sync failures, setup incomplete, automation failures
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
AlertIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
CheckCircleIcon,
|
||||
CloseIcon,
|
||||
} from '../../icons';
|
||||
|
||||
export interface AttentionItem {
|
||||
id: string;
|
||||
type: 'pending_review' | 'sync_failed' | 'setup_incomplete' | 'automation_failed' | 'credits_low';
|
||||
title: string;
|
||||
description: string;
|
||||
count?: number;
|
||||
actionLabel: string;
|
||||
actionHref?: string;
|
||||
onAction?: () => void;
|
||||
secondaryActionLabel?: string;
|
||||
secondaryActionHref?: string;
|
||||
onSecondaryAction?: () => void;
|
||||
}
|
||||
|
||||
interface NeedsAttentionBarProps {
|
||||
items: AttentionItem[];
|
||||
onDismiss?: (id: string) => void;
|
||||
}
|
||||
|
||||
const typeConfig = {
|
||||
pending_review: {
|
||||
icon: CheckCircleIcon,
|
||||
bgColor: 'bg-amber-50 dark:bg-amber-900/20',
|
||||
borderColor: 'border-amber-200 dark:border-amber-800',
|
||||
iconColor: 'text-amber-500',
|
||||
titleColor: 'text-amber-800 dark:text-amber-200',
|
||||
},
|
||||
sync_failed: {
|
||||
icon: AlertIcon,
|
||||
bgColor: 'bg-red-50 dark:bg-red-900/20',
|
||||
borderColor: 'border-red-200 dark:border-red-800',
|
||||
iconColor: 'text-red-500',
|
||||
titleColor: 'text-red-800 dark:text-red-200',
|
||||
},
|
||||
setup_incomplete: {
|
||||
icon: AlertIcon,
|
||||
bgColor: 'bg-blue-50 dark:bg-blue-900/20',
|
||||
borderColor: 'border-blue-200 dark:border-blue-800',
|
||||
iconColor: 'text-blue-500',
|
||||
titleColor: 'text-blue-800 dark:text-blue-200',
|
||||
},
|
||||
automation_failed: {
|
||||
icon: AlertIcon,
|
||||
bgColor: 'bg-red-50 dark:bg-red-900/20',
|
||||
borderColor: 'border-red-200 dark:border-red-800',
|
||||
iconColor: 'text-red-500',
|
||||
titleColor: 'text-red-800 dark:text-red-200',
|
||||
},
|
||||
credits_low: {
|
||||
icon: AlertIcon,
|
||||
bgColor: 'bg-orange-50 dark:bg-orange-900/20',
|
||||
borderColor: 'border-orange-200 dark:border-orange-800',
|
||||
iconColor: 'text-orange-500',
|
||||
titleColor: 'text-orange-800 dark:text-orange-200',
|
||||
},
|
||||
};
|
||||
|
||||
export default function NeedsAttentionBar({ items, onDismiss }: NeedsAttentionBarProps) {
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
|
||||
if (items.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-4">
|
||||
{/* Header */}
|
||||
<button
|
||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||
className="w-full flex items-center justify-between px-5 py-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-t-xl hover:bg-amber-100 dark:hover:bg-amber-900/30 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<AlertIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
|
||||
<span className="text-base font-semibold text-amber-800 dark:text-amber-200">
|
||||
Needs Attention ({items.length})
|
||||
</span>
|
||||
</div>
|
||||
{isCollapsed ? (
|
||||
<ChevronDownIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
|
||||
) : (
|
||||
<ChevronUpIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Content */}
|
||||
{!isCollapsed && (
|
||||
<div className="border border-t-0 border-amber-200 dark:border-amber-800 rounded-b-xl bg-white dark:bg-gray-900 p-4">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{items.map((item) => {
|
||||
const config = typeConfig[item.type];
|
||||
const Icon = config.icon;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`flex items-start gap-3 px-4 py-3 rounded-lg border ${config.bgColor} ${config.borderColor} min-w-[220px] flex-1 max-w-[380px]`}
|
||||
>
|
||||
<Icon className={`w-5 h-5 mt-0.5 flex-shrink-0 ${config.iconColor}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`text-base font-semibold ${config.titleColor}`}>
|
||||
{item.count ? `${item.count} ${item.title}` : item.title}
|
||||
</div>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mt-1 line-clamp-1">
|
||||
{item.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
{item.actionHref ? (
|
||||
<Link
|
||||
to={item.actionHref}
|
||||
className="text-sm font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
|
||||
>
|
||||
{item.actionLabel} →
|
||||
</Link>
|
||||
) : item.onAction ? (
|
||||
<button
|
||||
onClick={item.onAction}
|
||||
className="text-sm font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
|
||||
>
|
||||
{item.actionLabel}
|
||||
</button>
|
||||
) : null}
|
||||
{item.secondaryActionHref && (
|
||||
<Link
|
||||
to={item.secondaryActionHref}
|
||||
className="text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
{item.secondaryActionLabel}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{onDismiss && (
|
||||
<button
|
||||
onClick={() => onDismiss(item.id)}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
<CloseIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user