IT狗
46 lines
1.9 KiB
React
46 lines
1.9 KiB
React
import { CheckCircle, AlertCircle, Clock, X, AlertTriangle, Briefcase, Stethoscope, Timer, PartyPopper } from 'lucide-react'
|
|
|
|
/**
|
|
* Reusable status badge for attendance records.
|
|
* Renders one badge per status dimension (abnormal / late / early / OT / leave).
|
|
*
|
|
* Props:
|
|
* - code: status_code string (used for row-coloring and fallback)
|
|
* - late: late_minutes number
|
|
* - early: early_minutes number
|
|
* - ot: ot_minutes number
|
|
* - size: 'sm' | 'md' (default 'sm')
|
|
*/
|
|
export default function StatusBadge({ code, late = 0, early = 0, ot = 0, size = 'sm' }) {
|
|
const sizeCls = size === 'md'
|
|
? 'px-3 py-1 text-sm'
|
|
: 'px-2 py-0.5 text-xs'
|
|
|
|
const badge = (icon, label, colorCls) => (
|
|
<span className={`inline-flex items-center gap-1 ${sizeCls} rounded-full font-medium ${colorCls}`}>
|
|
{icon}
|
|
{label}
|
|
</span>
|
|
)
|
|
|
|
const parts = []
|
|
|
|
// Abnormal (any dimension > 30 min)
|
|
if (late > 30 || early > 30 || ot > 30) {
|
|
if (late > 30) parts.push(badge(<AlertTriangle size={12} />, `異常-遲到${late}分`, 'bg-red-100 text-red-700'))
|
|
else if (early > 30) parts.push(badge(<AlertTriangle size={12} />, `異常-早退${early}分`, 'bg-red-100 text-red-700'))
|
|
else parts.push(badge(<AlertTriangle size={12} />, `異常-OT${ot}分`, 'bg-red-100 text-red-700'))
|
|
} else {
|
|
// Individual badges (≤ 30 min each)
|
|
if (late > 0) parts.push(badge(<AlertCircle size={12} />, `遲到${late}分`, 'bg-orange-100 text-orange-700'))
|
|
if (early > 0) parts.push(badge(<Clock size={12} />, `早退${early}分`, 'bg-blue-100 text-blue-700'))
|
|
if (ot > 0) parts.push(badge(<Clock size={12} />, `OT${ot}分`, 'bg-purple-100 text-purple-700'))
|
|
}
|
|
|
|
if (parts.length === 0) {
|
|
return badge(<CheckCircle size={12} />, '正常', 'bg-green-100 text-green-700')
|
|
}
|
|
|
|
return <span className="inline-flex items-center gap-1 flex-wrap">{parts}</span>
|
|
}
|