163 lines
4.3 KiB
TypeScript
163 lines
4.3 KiB
TypeScript
import {
|
|
CheckCircle,
|
|
XCircle,
|
|
Clock,
|
|
MessageSquare,
|
|
RefreshCw,
|
|
UserPlus,
|
|
FileText,
|
|
Paperclip,
|
|
AlertTriangle,
|
|
Activity
|
|
} from 'lucide-react';
|
|
|
|
/**
|
|
* Utility: getPriorityConfig
|
|
*
|
|
* Purpose: Get display configuration for priority badges
|
|
*
|
|
* Returns: Object with color classes and label text
|
|
*
|
|
* Priority levels:
|
|
* - express/urgent: Red background, high visibility
|
|
* - standard: Blue background, normal visibility
|
|
* - default: Gray background, low visibility
|
|
*
|
|
* @param priority - Priority string from backend
|
|
* @returns Configuration object with Tailwind CSS classes
|
|
*/
|
|
export const getPriorityConfig = (priority: string) => {
|
|
switch (priority) {
|
|
case 'express':
|
|
case 'urgent':
|
|
return {
|
|
color: 'bg-red-100 text-red-800 border-red-200',
|
|
label: 'urgent priority'
|
|
};
|
|
case 'standard':
|
|
return {
|
|
color: 'bg-blue-100 text-blue-800 border-blue-200',
|
|
label: 'standard priority'
|
|
};
|
|
default:
|
|
return {
|
|
color: 'bg-gray-100 text-gray-800 border-gray-200',
|
|
label: 'normal priority'
|
|
};
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Utility: getStatusConfig
|
|
*
|
|
* Purpose: Get display configuration for status badges
|
|
*
|
|
* Returns: Object with color classes and label text
|
|
*
|
|
* Status types:
|
|
* - pending: Yellow (waiting for action)
|
|
* - in-review: Blue (actively being reviewed)
|
|
* - approved: Green (successfully approved)
|
|
* - rejected: Red (declined)
|
|
* - closed: Gray (finalized and archived)
|
|
* - skipped: Orange (bypassed approver)
|
|
*
|
|
* @param status - Status string from backend
|
|
* @returns Configuration object with Tailwind CSS classes
|
|
*/
|
|
export const getStatusConfig = (status: string) => {
|
|
switch (status) {
|
|
case 'pending':
|
|
return {
|
|
color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
|
label: 'pending'
|
|
};
|
|
case 'paused':
|
|
return {
|
|
color: 'bg-gray-400 text-gray-100 border-gray-500',
|
|
label: 'paused'
|
|
};
|
|
case 'in-review':
|
|
return {
|
|
color: 'bg-blue-100 text-blue-800 border-blue-200',
|
|
label: 'in-review'
|
|
};
|
|
case 'approved':
|
|
return {
|
|
color: 'bg-green-100 text-green-800 border-green-200',
|
|
label: 'approved'
|
|
};
|
|
case 'rejected':
|
|
return {
|
|
color: 'bg-red-100 text-red-800 border-red-200',
|
|
label: 'rejected'
|
|
};
|
|
case 'closed':
|
|
return {
|
|
color: 'bg-gray-100 text-gray-800 border-gray-300',
|
|
label: 'closed'
|
|
};
|
|
case 'skipped':
|
|
return {
|
|
color: 'bg-orange-100 text-orange-800 border-orange-200',
|
|
label: 'skipped'
|
|
};
|
|
default:
|
|
return {
|
|
color: 'bg-gray-100 text-gray-800 border-gray-200',
|
|
label: status
|
|
};
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Utility: getActionTypeIcon
|
|
*
|
|
* Purpose: Get appropriate icon for activity timeline entries
|
|
*
|
|
* Returns: Lucide icon component for the action type
|
|
*
|
|
* Action types:
|
|
* - approval/approved: Green checkmark
|
|
* - rejection/rejected: Red X
|
|
* - comment: Blue message bubble
|
|
* - status_change/updated: Orange refresh
|
|
* - assignment: Purple user plus
|
|
* - created: Blue file
|
|
* - reminder: Yellow clock
|
|
* - document_added: Indigo paperclip
|
|
* - sla_warning: Amber warning triangle
|
|
* - default: Gray activity pulse
|
|
*
|
|
* @param type - Activity type from backend
|
|
* @returns JSX icon element with appropriate color
|
|
*/
|
|
export const getActionTypeIcon = (type: string) => {
|
|
switch (type) {
|
|
case 'approval':
|
|
case 'approved':
|
|
return <CheckCircle className="w-5 h-5 text-green-600" />;
|
|
case 'rejection':
|
|
case 'rejected':
|
|
return <XCircle className="w-5 h-5 text-red-600" />;
|
|
case 'comment':
|
|
return <MessageSquare className="w-5 h-5 text-blue-600" />;
|
|
case 'status_change':
|
|
case 'updated':
|
|
return <RefreshCw className="w-5 h-5 text-orange-600" />;
|
|
case 'assignment':
|
|
return <UserPlus className="w-5 h-5 text-purple-600" />;
|
|
case 'created':
|
|
return <FileText className="w-5 h-5 text-blue-600" />;
|
|
case 'reminder':
|
|
return <Clock className="w-5 h-5 text-yellow-600" />;
|
|
case 'document_added':
|
|
return <Paperclip className="w-5 h-5 text-indigo-600" />;
|
|
case 'sla_warning':
|
|
return <AlertTriangle className="w-5 h-5 text-amber-600" />;
|
|
default:
|
|
return <Activity className="w-5 h-5 text-gray-600" />;
|
|
}
|
|
};
|
|
|