Initial commit: AARS backend + frontend + holiday/leave phase 1+2

2026-07-19 20:10:15 +08:00
commit bbc0048c24
49 changed files with 13375 additions and 0 deletions
@@ -0,0 +1,124 @@
+import { CheckCircle, AlertCircle, Clock, X, AlertTriangle, Briefcase, Stethoscope, Timer, PartyPopper } from 'lucide-react'
+
+/**
+ * Reusable status badge for attendance records.
+ * Handles all status codes including enriched leave types:
+ *   normal / late / late_early / late_ot / early / early_ot / ot / abnormal / missing
+ *   holiday / al / sl / cl / mixed_leave
+ *
+ * Props:
+ *   - code: status_code string
+ *   - text: status_text string (already enriched)
+ *   - size: 'sm' | 'md' (default 'sm')
+ */
+export default function StatusBadge({ code, text = '', size = 'sm' }) {
+  const sizeCls = size === 'md'
+    ? 'px-3 py-1 text-sm'
+    : 'px-2 py-0.5 text-xs'
+
+  // Split text into main + leave parts (after ' + ' separator)
+  const parts = text.split(/\s*\+\s*/).filter(Boolean)
+  const mainText = parts[0] || ''
+  const leaveParts = parts.slice(1)
+
+  const badge = (icon, label, colorCls) => (
+    <span className={`inline-flex items-center gap-1 ${sizeCls} rounded-full font-medium ${colorCls}`}>
+      {icon}
+      {label}
+    </span>
+  )
+
+  // ============ Attendance status badges ============
+  if (code === 'normal') {
+    return (
+      <span className="inline-flex items-center gap-1.5">
+        {badge(<CheckCircle size={12} />, mainText || '正常', 'bg-green-100 text-green-700')}
+        {leaveParts.map((lp, i) => (
+          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
+            + {lp}
+          </span>
+        ))}
+      </span>
+    )
+  }
+  if (code === 'late' || code === 'late_early' || code === 'late_ot') {
+    return (
+      <span className="inline-flex items-center gap-1.5">
+        {badge(<AlertCircle size={12} />, mainText || code, 'bg-orange-100 text-orange-700')}
+        {leaveParts.map((lp, i) => (
+          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
+            + {lp}
+          </span>
+        ))}
+      </span>
+    )
+  }
+  if (code === 'early' || code === 'early_ot') {
+    return (
+      <span className="inline-flex items-center gap-1.5">
+        {badge(<Clock size={12} />, mainText || code, 'bg-blue-100 text-blue-700')}
+        {leaveParts.map((lp, i) => (
+          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
+            + {lp}
+          </span>
+        ))}
+      </span>
+    )
+  }
+  if (code === 'ot') {
+    return (
+      <span className="inline-flex items-center gap-1.5">
+        {badge(<Clock size={12} />, mainText || '加班', 'bg-purple-100 text-purple-700')}
+        {leaveParts.map((lp, i) => (
+          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
+            + {lp}
+          </span>
+        ))}
+      </span>
+    )
+  }
+  if (code === 'abnormal') {
+    return (
+      <span className="inline-flex items-center gap-1.5">
+        {badge(<AlertTriangle size={12} />, mainText || '⚠️異常', 'bg-red-100 text-red-700')}
+        {leaveParts.map((lp, i) => (
+          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
+            + {lp}
+          </span>
+        ))}
+      </span>
+    )
+  }
+  if (code === 'missing') {
+    return (
+      <span className="inline-flex items-center gap-1.5">
+        {badge(<X size={12} />, '缺勤', 'bg-gray-200 text-gray-600')}
+        {leaveParts.map((lp, i) => (
+          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
+            {lp}
+          </span>
+        ))}
+      </span>
+    )
+  }
+
+  // ============ Enriched leave status badges ============
+  if (code === 'holiday') {
+    return badge(<PartyPopper size={12} />, mainText, 'bg-amber-100 text-amber-700')
+  }
+  if (code === 'al') {
+    return badge(<Briefcase size={12} />, mainText || '年假', 'bg-emerald-100 text-emerald-700')
+  }
+  if (code === 'sl') {
+    return badge(<Stethoscope size={12} />, mainText || '病假', 'bg-pink-100 text-pink-700')
+  }
+  if (code === 'cl') {
+    return badge(<Timer size={12} />, mainText || '補鐘', 'bg-indigo-100 text-indigo-700')
+  }
+  if (code === 'mixed_leave') {
+    return badge(<Timer size={12} />, mainText || '混合假', 'bg-fuchsia-100 text-fuchsia-700')
+  }
+
+  // fallback
+  return <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs text-slate-500 bg-slate-100`}>{text || code || '-'}</span>
+}