IT Dog
987 lines
40 KiB
React
987 lines
40 KiB
React
import { useState, useEffect, useRef } from 'react'
|
||
import api from '../../api'
|
||
import toast from 'react-hot-toast'
|
||
import {
|
||
Plus, Edit2, Trash2, RefreshCw, Upload, Download, Calendar as CalIcon,
|
||
Users, X, ChevronDown, ChevronUp, Filter,
|
||
} from 'lucide-react'
|
||
import StatusBadge from '../../components/StatusBadge'
|
||
|
||
const LEAVE_TYPES = [
|
||
{ value: 'SL', label: '病假 SL', color: 'pink' },
|
||
{ value: 'CL', label: '補鐘 CL', color: 'indigo' },
|
||
{ value: 'AL', label: '年假 AL', color: 'emerald' },
|
||
]
|
||
|
||
const CURRENT_YEAR = new Date().getFullYear()
|
||
const YEAR_OPTIONS = [CURRENT_YEAR - 1, CURRENT_YEAR, CURRENT_YEAR + 1, CURRENT_YEAR + 2]
|
||
|
||
export default function HolidaysPage() {
|
||
const [tab, setTab] = useState('holidays')
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-slate-900">假期 Holidays</h1>
|
||
<p className="text-sm text-slate-500 mt-1">
|
||
管理公眾假期 + 員工請假 (SL 病假 / CL 補鐘 / AL 年假)
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="border-b border-slate-200">
|
||
<nav className="flex gap-4">
|
||
<button
|
||
onClick={() => setTab('holidays')}
|
||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||
tab === 'holidays'
|
||
? 'border-primary-600 text-primary-700'
|
||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||
}`}
|
||
>
|
||
<CalIcon size={16} className="inline mr-1.5" />
|
||
公眾假期
|
||
</button>
|
||
<button
|
||
onClick={() => setTab('leaves')}
|
||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||
tab === 'leaves'
|
||
? 'border-primary-600 text-primary-700'
|
||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||
}`}
|
||
>
|
||
<Users size={16} className="inline mr-1.5" />
|
||
員工請假
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
|
||
{tab === 'holidays' ? <HolidaysTab /> : <LeavesTab />}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ============ Tab 1: 公眾假期 ============
|
||
function HolidaysTab() {
|
||
const [year, setYear] = useState(CURRENT_YEAR)
|
||
const [holidays, setHolidays] = useState([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [editing, setEditing] = useState(null) // Holiday object or null
|
||
const [showCreate, setShowCreate] = useState(false)
|
||
|
||
useEffect(() => {
|
||
load()
|
||
}, [year])
|
||
|
||
async function load() {
|
||
setLoading(true)
|
||
try {
|
||
const { data } = await api.get(`/api/holidays?year=${year}`)
|
||
setHolidays(data)
|
||
} catch (err) {
|
||
toast.error(err.response?.data?.detail || '載入失敗')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
async function handleRefresh() {
|
||
if (!confirm(`從 gov.hk 重新抓取 ${year} 年假期？\n(手動編輯嘅假期唔會被覆寫)`)) return
|
||
try {
|
||
const { data } = await api.post(`/api/holidays/refresh?years=${year}`)
|
||
toast.success(`✓ ${year} 已同步：新增 ${data.added} / 更新 ${data.updated} / 跳過 ${data.skipped}`)
|
||
load()
|
||
} catch (err) {
|
||
toast.error(err.response?.data?.detail || '同步失敗')
|
||
}
|
||
}
|
||
|
||
async function handleDelete(h) {
|
||
if (!confirm(`確定要刪除 ${h.date}「${h.name}」？`)) return
|
||
try {
|
||
await api.delete(`/api/holidays/${h.id}`)
|
||
toast.success('已刪除')
|
||
load()
|
||
} catch (err) {
|
||
toast.error(err.response?.data?.detail || '刪除失敗')
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* Toolbar */}
|
||
<div className="bg-white border border-slate-200 rounded-lg p-4 flex flex-wrap items-center gap-3">
|
||
<div className="flex items-center gap-2">
|
||
<label className="text-sm font-medium text-slate-700">年份:</label>
|
||
<select
|
||
value={year}
|
||
onChange={(e) => setYear(Number(e.target.value))}
|
||
className="px-3 py-1.5 border border-slate-300 rounded-md text-sm"
|
||
>
|
||
{YEAR_OPTIONS.map(y => <option key={y} value={y}>{y}</option>)}
|
||
</select>
|
||
</div>
|
||
<div className="flex-1" />
|
||
<button
|
||
onClick={() => setShowCreate(true)}
|
||
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary-600 text-white rounded-md text-sm font-medium hover:bg-primary-700"
|
||
>
|
||
<Plus size={14} /> 加公假
|
||
</button>
|
||
<button
|
||
onClick={handleRefresh}
|
||
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white border border-slate-300 text-slate-700 rounded-md text-sm font-medium hover:bg-slate-50"
|
||
>
|
||
<RefreshCw size={14} /> 從 GovHK 同步
|
||
</button>
|
||
</div>
|
||
|
||
{/* Table */}
|
||
<div className="bg-white border border-slate-200 rounded-lg overflow-hidden">
|
||
{loading ? (
|
||
<div className="p-8 text-center text-slate-400">載入中...</div>
|
||
) : holidays.length === 0 ? (
|
||
<div className="p-8 text-center text-slate-400">{year} 年冇假期資料</div>
|
||
) : (
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-slate-50 border-b border-slate-200">
|
||
<tr>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">日期</th>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">名稱 (中)</th>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">Name (EN)</th>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">類型</th>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">來源</th>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">備註</th>
|
||
<th className="px-4 py-2.5 text-right font-medium text-slate-700">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-100">
|
||
{holidays.map(h => (
|
||
<tr key={h.id} className="hover:bg-slate-50">
|
||
<td className="px-4 py-2 font-mono text-slate-700">{h.date}</td>
|
||
<td className="px-4 py-2 font-medium text-slate-900">{h.name}</td>
|
||
<td className="px-4 py-2 text-slate-600">{h.name_en || '-'}</td>
|
||
<td className="px-4 py-2">
|
||
{h.is_mandatory ? (
|
||
<span className="inline-block px-2 py-0.5 rounded text-xs bg-blue-100 text-blue-700">法定</span>
|
||
) : (
|
||
<span className="inline-block px-2 py-0.5 rounded text-xs bg-slate-100 text-slate-600">銀行/學校</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-2 text-xs text-slate-500">{h.source || '-'}</td>
|
||
<td className="px-4 py-2 text-slate-500 text-xs">{h.notes || '-'}</td>
|
||
<td className="px-4 py-2 text-right">
|
||
<button
|
||
onClick={() => setEditing(h)}
|
||
className="p-1 text-slate-400 hover:text-primary-600 hover:bg-primary-50 rounded"
|
||
title="編輯"
|
||
>
|
||
<Edit2 size={14} />
|
||
</button>
|
||
<button
|
||
onClick={() => handleDelete(h)}
|
||
className="p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded ml-1"
|
||
title="刪除"
|
||
>
|
||
<Trash2 size={14} />
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-xs text-slate-500 text-center">
|
||
共 {holidays.length} 個公眾假期 · 來源：<a className="text-primary-600 underline" href="https://www.gov.hk/en/about/abouthk/holiday/" target="_blank" rel="noreferrer">gov.hk</a>
|
||
</div>
|
||
|
||
{(showCreate || editing) && (
|
||
<HolidayModal
|
||
holiday={editing}
|
||
onClose={() => { setShowCreate(false); setEditing(null) }}
|
||
onSaved={() => { setShowCreate(false); setEditing(null); load() }}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ============ Tab 2: 員工請假 ============
|
||
function LeavesTab() {
|
||
const [leaves, setLeaves] = useState([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [editing, setEditing] = useState(null)
|
||
const [showCreate, setShowCreate] = useState(false)
|
||
const [filterType, setFilterType] = useState('')
|
||
const [filterEmp, setFilterEmp] = useState('')
|
||
const [filterFrom, setFilterFrom] = useState('')
|
||
const [filterTo, setFilterTo] = useState('')
|
||
const fileInputRef = useRef(null)
|
||
|
||
useEffect(() => {
|
||
load()
|
||
}, [])
|
||
|
||
async function load() {
|
||
setLoading(true)
|
||
try {
|
||
const params = new URLSearchParams()
|
||
if (filterType) params.set('leave_type', filterType)
|
||
if (filterEmp) params.set('employee_name', filterEmp)
|
||
if (filterFrom) params.set('date_from', filterFrom)
|
||
if (filterTo) params.set('date_to', filterTo)
|
||
const { data } = await api.get(`/api/leave?${params}`)
|
||
setLeaves(data)
|
||
} catch (err) {
|
||
toast.error(err.response?.data?.detail || '載入失敗')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
async function handleDelete(lv) {
|
||
if (!confirm(`確定要刪除 ${lv.employee_name} ${lv.date} ${lv.leave_type}${lv.hours}h？`)) return
|
||
try {
|
||
await api.delete(`/api/leave/${lv.id}`)
|
||
toast.success('已刪除')
|
||
load()
|
||
} catch (err) {
|
||
toast.error(err.response?.data?.detail || '刪除失敗')
|
||
}
|
||
}
|
||
|
||
async function handleUpload(e) {
|
||
const f = e.target.files?.[0]
|
||
if (!f) return
|
||
const fd = new FormData()
|
||
fd.append('file', f)
|
||
try {
|
||
const { data } = await api.post('/api/leave/upload', fd, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
})
|
||
const errMsg = data.errors?.length ? `\n錯誤 (前 ${data.errors.length} 條):\n${data.errors.join('\n')}` : ''
|
||
toast.success(`✓ 新增 ${data.added} 條 / 跳過 ${data.skipped} 條${errMsg}`, { duration: 6000 })
|
||
load()
|
||
} catch (err) {
|
||
toast.error(err.response?.data?.detail || '上傳失敗')
|
||
} finally {
|
||
if (fileInputRef.current) fileInputRef.current.value = ''
|
||
}
|
||
}
|
||
|
||
function downloadTemplate() {
|
||
const csv = 'employee_name,date,leave_type,hours,reason,approved_by\nJay Lam,2026-07-15,SL,2.0,睇醫生,\nJay Lam,2026-07-20,AL,8.0,Family trip,Manager A\n'
|
||
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = 'leave_template.csv'
|
||
a.click()
|
||
URL.revokeObjectURL(url)
|
||
}
|
||
|
||
// Fetch employee list from /api/employees/list (UNION of attendance + leave + accident)
|
||
const [employees, setEmployees] = useState([])
|
||
useEffect(() => {
|
||
api.get('/api/employees/list')
|
||
.then(({ data }) => setEmployees(data.employees || []))
|
||
.catch(() => setEmployees([]))
|
||
}, [])
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* Filters */}
|
||
<div className="bg-white border border-slate-200 rounded-lg p-4 flex flex-wrap items-center gap-3">
|
||
<select
|
||
value={filterType}
|
||
onChange={(e) => setFilterType(e.target.value)}
|
||
className="px-3 py-1.5 border border-slate-300 rounded-md text-sm"
|
||
>
|
||
<option value="">所有類型</option>
|
||
{LEAVE_TYPES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
|
||
</select>
|
||
<input
|
||
type="date"
|
||
value={filterFrom}
|
||
onChange={(e) => setFilterFrom(e.target.value)}
|
||
placeholder="由"
|
||
className="px-3 py-1.5 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
<input
|
||
type="date"
|
||
value={filterTo}
|
||
onChange={(e) => setFilterTo(e.target.value)}
|
||
placeholder="至"
|
||
className="px-3 py-1.5 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
<button
|
||
onClick={load}
|
||
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 text-slate-700 rounded-md text-sm font-medium hover:bg-slate-200"
|
||
>
|
||
<Filter size={14} /> 套用
|
||
</button>
|
||
<button
|
||
onClick={() => { setFilterType(''); setFilterEmp(''); setFilterFrom(''); setFilterTo(''); setTimeout(load, 0) }}
|
||
className="inline-flex items-center gap-1 px-2 py-1.5 text-slate-500 hover:text-slate-700 text-sm"
|
||
>
|
||
<X size={14} /> 清
|
||
</button>
|
||
<div className="flex-1" />
|
||
<button
|
||
onClick={downloadTemplate}
|
||
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white border border-slate-300 text-slate-700 rounded-md text-sm font-medium hover:bg-slate-50"
|
||
>
|
||
<Download size={14} /> CSV 範本
|
||
</button>
|
||
<button
|
||
onClick={() => fileInputRef.current?.click()}
|
||
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white border border-slate-300 text-slate-700 rounded-md text-sm font-medium hover:bg-slate-50"
|
||
>
|
||
<Upload size={14} /> 上傳 CSV/Excel
|
||
</button>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept=".csv,.xlsx,.xls"
|
||
onChange={handleUpload}
|
||
className="hidden"
|
||
/>
|
||
<button
|
||
onClick={() => setShowCreate(true)}
|
||
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary-600 text-white rounded-md text-sm font-medium hover:bg-primary-700"
|
||
>
|
||
<Plus size={14} /> 加請假
|
||
</button>
|
||
</div>
|
||
|
||
{/* Table */}
|
||
<div className="bg-white border border-slate-200 rounded-lg overflow-hidden">
|
||
{loading ? (
|
||
<div className="p-8 text-center text-slate-400">載入中...</div>
|
||
) : leaves.length === 0 ? (
|
||
<div className="p-8 text-center text-slate-400">冇請假記錄</div>
|
||
) : (
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-slate-50 border-b border-slate-200">
|
||
<tr>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">員工</th>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">日期</th>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">類型</th>
|
||
<th className="px-4 py-2.5 text-right font-medium text-slate-700">時數</th>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">原因</th>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">審批人</th>
|
||
<th className="px-4 py-2.5 text-left font-medium text-slate-700">來源</th>
|
||
<th className="px-4 py-2.5 text-right font-medium text-slate-700">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-100">
|
||
{leaves.map(lv => (
|
||
<tr key={lv.id} className="hover:bg-slate-50">
|
||
<td className="px-4 py-2 font-medium text-slate-900">{lv.employee_name}</td>
|
||
<td className="px-4 py-2 font-mono text-slate-700">{lv.date}</td>
|
||
<td className="px-4 py-2">
|
||
<span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${
|
||
lv.leave_type === 'SL' ? 'bg-pink-100 text-pink-700' :
|
||
lv.leave_type === 'CL' ? 'bg-indigo-100 text-indigo-700' :
|
||
'bg-emerald-100 text-emerald-700'
|
||
}`}>
|
||
{LEAVE_TYPES.find(t => t.value === lv.leave_type)?.label || lv.leave_type}
|
||
</span>
|
||
</td>
|
||
<td className="px-4 py-2 text-right tabular-nums">{lv.hours}h</td>
|
||
<td className="px-4 py-2 text-slate-600 text-xs">{lv.reason || '-'}</td>
|
||
<td className="px-4 py-2 text-slate-600 text-xs">{lv.approved_by || '-'}</td>
|
||
<td className="px-4 py-2 text-xs text-slate-500">{lv.source || '-'}</td>
|
||
<td className="px-4 py-2 text-right">
|
||
<button
|
||
onClick={() => setEditing(lv)}
|
||
className="p-1 text-slate-400 hover:text-primary-600 hover:bg-primary-50 rounded"
|
||
title="編輯"
|
||
>
|
||
<Edit2 size={14} />
|
||
</button>
|
||
<button
|
||
onClick={() => handleDelete(lv)}
|
||
className="p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded ml-1"
|
||
title="刪除"
|
||
>
|
||
<Trash2 size={14} />
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-xs text-slate-500 text-center">
|
||
共 {leaves.length} 條請假記錄
|
||
</div>
|
||
|
||
{(showCreate || editing) && (
|
||
<LeaveModal
|
||
leave={editing}
|
||
employees={uniqueEmps}
|
||
onClose={() => { setShowCreate(false); setEditing(null) }}
|
||
onSaved={() => { setShowCreate(false); setEditing(null); load() }}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ============ Holiday Modal ============
|
||
function HolidayModal({ holiday, onClose, onSaved }) {
|
||
const isEdit = !!holiday
|
||
const [date, setDate] = useState(holiday?.date || '')
|
||
const [name, setName] = useState(holiday?.name || '')
|
||
const [nameEn, setNameEn] = useState(holiday?.name_en || '')
|
||
const [isMandatory, setIsMandatory] = useState(holiday?.is_mandatory ?? true)
|
||
const [notes, setNotes] = useState(holiday?.notes || '')
|
||
const [saving, setSaving] = useState(false)
|
||
|
||
async function handleSave() {
|
||
if (!date || !name) {
|
||
toast.error('日期同名稱係必填')
|
||
return
|
||
}
|
||
setSaving(true)
|
||
try {
|
||
if (isEdit) {
|
||
await api.put(`/api/holidays/${holiday.id}`, {
|
||
date, name, name_en: nameEn, is_mandatory: isMandatory, notes,
|
||
})
|
||
toast.success('已更新')
|
||
} else {
|
||
await api.post('/api/holidays', {
|
||
date, name, name_en: nameEn, is_mandatory: isMandatory, notes,
|
||
})
|
||
toast.success('已新增')
|
||
}
|
||
onSaved()
|
||
} catch (err) {
|
||
toast.error(err.response?.data?.detail || '儲存失敗')
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={onClose}>
|
||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md" onClick={(e) => e.stopPropagation()}>
|
||
<div className="px-5 py-3 border-b border-slate-200 flex items-center justify-between">
|
||
<h3 className="font-semibold text-slate-900">{isEdit ? '編輯假期' : '加公假'}</h3>
|
||
<button onClick={onClose} className="p-1 text-slate-400 hover:text-slate-700 rounded">
|
||
<X size={18} />
|
||
</button>
|
||
</div>
|
||
<div className="p-5 space-y-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">日期 <span className="text-red-500">*</span></label>
|
||
<input
|
||
type="date"
|
||
value={date}
|
||
onChange={(e) => setDate(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">名稱 (中文) <span className="text-red-500">*</span></label>
|
||
<input
|
||
type="text"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
placeholder="元旦 / 香港回歸紀念日"
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">Name (English)</label>
|
||
<input
|
||
type="text"
|
||
value={nameEn}
|
||
onChange={(e) => setNameEn(e.target.value)}
|
||
placeholder="The first day of January"
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
type="checkbox"
|
||
id="mandatory"
|
||
checked={isMandatory}
|
||
onChange={(e) => setIsMandatory(e.target.checked)}
|
||
className="rounded"
|
||
/>
|
||
<label htmlFor="mandatory" className="text-sm text-slate-700">
|
||
法定假日 (勞工假)
|
||
</label>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">備註</label>
|
||
<input
|
||
type="text"
|
||
value={notes}
|
||
onChange={(e) => setNotes(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="px-5 py-3 border-t border-slate-200 flex justify-end gap-2">
|
||
<button onClick={onClose} className="px-4 py-1.5 text-slate-600 hover:bg-slate-100 rounded-md text-sm">
|
||
取消
|
||
</button>
|
||
<button
|
||
onClick={handleSave}
|
||
disabled={saving}
|
||
className="px-4 py-1.5 bg-primary-600 text-white rounded-md text-sm font-medium hover:bg-primary-700 disabled:opacity-50"
|
||
>
|
||
{saving ? '儲存中...' : (isEdit ? '更新' : '新增')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ============ Leave Modal (multi-row create, single edit) ============
|
||
function LeaveModal({ leave, employees, onClose, onSaved }) {
|
||
const isEdit = !!leave
|
||
|
||
// Edit-mode state
|
||
const [employeeName, setEmployeeName] = useState(leave?.employee_name || '')
|
||
const [date, setDate] = useState(leave?.date || '')
|
||
const [leaveType, setLeaveType] = useState(leave?.leave_type || 'SL')
|
||
const [hours, setHours] = useState(leave?.hours ?? 8)
|
||
const [reason, setReason] = useState(leave?.reason || '')
|
||
const [approvedBy, setApprovedBy] = useState(leave?.approved_by || '')
|
||
const [saving, setSaving] = useState(false)
|
||
|
||
// Create-mode: shared employee + date, plus a list of leave-type rows
|
||
const [createName, setCreateName] = useState('')
|
||
const [createDate, setCreateDate] = useState('')
|
||
const [rows, setRows] = useState([{ leave_type: 'SL', hours: 2, reason: '' }])
|
||
const [createApprovedBy, setCreateApprovedBy] = useState('')
|
||
const [results, setResults] = useState(null) // null | {added, skipped, failed}
|
||
|
||
async function handleSaveEdit() {
|
||
if (!employeeName || !date || !leaveType) {
|
||
toast.error('員工 / 日期 / 類型 係必填')
|
||
return
|
||
}
|
||
const h = Number(hours)
|
||
if (isNaN(h) || h < 0 || h > 24) {
|
||
toast.error('時數必須 0-24')
|
||
return
|
||
}
|
||
setSaving(true)
|
||
try {
|
||
await api.put(`/api/leave/${leave.id}`, {
|
||
employee_name: employeeName, date, leave_type: leaveType,
|
||
hours: h, reason, approved_by: approvedBy,
|
||
})
|
||
toast.success('已更新')
|
||
onSaved()
|
||
} catch (err) {
|
||
toast.error(err.response?.data?.detail || '儲存失敗')
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
function addRow() {
|
||
// Suggest an unused type so user doesn't have to pick
|
||
const used = new Set(rows.map(r => r.leave_type))
|
||
const next = ['SL', 'CL', 'AL'].find(t => !used.has(t)) || 'SL'
|
||
setRows([...rows, { leave_type: next, hours: 1, reason: '' }])
|
||
}
|
||
function removeRow(idx) {
|
||
setRows(rows.filter((_, i) => i !== idx))
|
||
}
|
||
function updateRow(idx, field, value) {
|
||
setRows(rows.map((r, i) => i === idx ? { ...r, [field]: value } : r))
|
||
}
|
||
|
||
async function handleSaveCreate() {
|
||
if (!createName || !createDate) {
|
||
toast.error('員工 / 日期 係必填')
|
||
return
|
||
}
|
||
const valid = rows.filter(r => r.leave_type && Number(r.hours) > 0 && Number(r.hours) <= 24)
|
||
if (valid.length === 0) {
|
||
toast.error('至少要有一條有效 row (類型 + 時數 > 0)')
|
||
return
|
||
}
|
||
setSaving(true)
|
||
setResults(null)
|
||
let added = 0
|
||
const skipped = []
|
||
const failed = []
|
||
for (const row of valid) {
|
||
try {
|
||
await api.post('/api/leave', {
|
||
employee_name: createName,
|
||
date: createDate,
|
||
leave_type: row.leave_type,
|
||
hours: Number(row.hours),
|
||
reason: row.reason,
|
||
approved_by: createApprovedBy,
|
||
})
|
||
added += 1
|
||
} catch (err) {
|
||
const status = err.response?.status
|
||
const detail = err.response?.data?.detail || err.message
|
||
// SQLAlchemy UNIQUE violation → 撞到 existing
|
||
if (status === 409 || (detail && (detail.includes('UNIQUE') || detail.includes('exists')))) {
|
||
skipped.push({ row, reason: '撞到 existing record' })
|
||
} else {
|
||
failed.push({ row, reason: detail })
|
||
}
|
||
}
|
||
}
|
||
setResults({ added, skipped, failed, total: valid.length })
|
||
setSaving(false)
|
||
if (added > 0) {
|
||
// refresh parent + show summary
|
||
const msg = `✓ 加咗 ${added} 條` +
|
||
(skipped.length ? ` · skip ${skipped.length}` : '') +
|
||
(failed.length ? ` · 失敗 ${failed.length}` : '')
|
||
toast.success(msg)
|
||
// Auto-close after 1.5s if no failures
|
||
if (failed.length === 0) {
|
||
setTimeout(() => onSaved(), 1200)
|
||
}
|
||
} else if (failed.length === 0) {
|
||
toast('冇加到 (全部撞到 existing)', { icon: 'ℹ️' })
|
||
} else {
|
||
toast.error(`${failed.length} 條失敗`)
|
||
}
|
||
}
|
||
|
||
// ============== EDIT MODE ==============
|
||
if (isEdit) {
|
||
return (
|
||
<div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={onClose}>
|
||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md" onClick={(e) => e.stopPropagation()}>
|
||
<div className="px-5 py-3 border-b border-slate-200 flex items-center justify-between">
|
||
<h3 className="font-semibold text-slate-900">編輯請假</h3>
|
||
<button onClick={onClose} className="p-1 text-slate-400 hover:text-slate-700 rounded">
|
||
<X size={18} />
|
||
</button>
|
||
</div>
|
||
<div className="p-5 space-y-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">員工 <span className="text-red-500">*</span></label>
|
||
{employees && employees.length > 0 ? (
|
||
<select
|
||
value={employeeName}
|
||
onChange={(e) => setEmployeeName(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
>
|
||
<option value="">-- 揀員工 --</option>
|
||
{employees.map(e => <option key={e} value={e}>{e}</option>)}
|
||
{!employees.includes(employeeName) && employeeName && (
|
||
<option value={employeeName}>{employeeName} (新)</option>
|
||
)}
|
||
</select>
|
||
) : (
|
||
<input
|
||
type="text"
|
||
value={employeeName}
|
||
onChange={(e) => setEmployeeName(e.target.value)}
|
||
placeholder="員工姓名"
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
)}
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">日期 <span className="text-red-500">*</span></label>
|
||
<input
|
||
type="date"
|
||
value={date}
|
||
onChange={(e) => setDate(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">類型 <span className="text-red-500">*</span></label>
|
||
<div className="flex gap-2">
|
||
{LEAVE_TYPES.map(t => (
|
||
<button
|
||
key={t.value}
|
||
type="button"
|
||
onClick={() => setLeaveType(t.value)}
|
||
className={`flex-1 px-3 py-2 rounded-md text-sm font-medium border transition-colors ${
|
||
leaveType === t.value
|
||
? t.color === 'pink' ? 'bg-pink-100 border-pink-400 text-pink-700'
|
||
: t.color === 'indigo' ? 'bg-indigo-100 border-indigo-400 text-indigo-700'
|
||
: 'bg-emerald-100 border-emerald-400 text-emerald-700'
|
||
: 'bg-white border-slate-300 text-slate-600 hover:bg-slate-50'
|
||
}`}
|
||
>
|
||
{t.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">時數 (0-24) <span className="text-red-500">*</span></label>
|
||
<input
|
||
type="number"
|
||
step="0.5"
|
||
min="0"
|
||
max="24"
|
||
value={hours}
|
||
onChange={(e) => setHours(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
<div className="flex gap-1 mt-1">
|
||
{[1, 2, 4, 8].map(h => (
|
||
<button
|
||
key={h}
|
||
type="button"
|
||
onClick={() => setHours(h)}
|
||
className="px-2 py-0.5 text-xs bg-slate-100 hover:bg-slate-200 rounded"
|
||
>
|
||
{h}h
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">原因</label>
|
||
<input
|
||
type="text"
|
||
value={reason}
|
||
onChange={(e) => setReason(e.target.value)}
|
||
placeholder="睇醫生 / Family trip / 補鐘"
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">審批人</label>
|
||
<input
|
||
type="text"
|
||
value={approvedBy}
|
||
onChange={(e) => setApprovedBy(e.target.value)}
|
||
placeholder="Manager A"
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="px-5 py-3 border-t border-slate-200 flex justify-end gap-2">
|
||
<button onClick={onClose} className="px-4 py-1.5 text-slate-600 hover:bg-slate-100 rounded-md text-sm">
|
||
取消
|
||
</button>
|
||
<button
|
||
onClick={handleSaveEdit}
|
||
disabled={saving}
|
||
className="px-4 py-1.5 bg-primary-600 text-white rounded-md text-sm font-medium hover:bg-primary-700 disabled:opacity-50"
|
||
>
|
||
{saving ? '儲存中...' : '更新'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ============== CREATE MODE (multi-row) ==============
|
||
const totalHours = rows.reduce((s, r) => s + (Number(r.hours) || 0), 0)
|
||
const validCount = rows.filter(r => r.leave_type && Number(r.hours) > 0).length
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={onClose}>
|
||
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
|
||
<div className="px-5 py-3 border-b border-slate-200 flex items-center justify-between">
|
||
<div>
|
||
<h3 className="font-semibold text-slate-900">加請假 (一次過加多個類型)</h3>
|
||
<p className="text-xs text-slate-500 mt-0.5">SL 病假 / CL 補鐘 / AL 年假 — 可以同日多條</p>
|
||
</div>
|
||
<button onClick={onClose} className="p-1 text-slate-400 hover:text-slate-700 rounded">
|
||
<X size={18} />
|
||
</button>
|
||
</div>
|
||
<div className="p-5 space-y-4">
|
||
{/* Shared: employee + date + approver */}
|
||
<div className="grid grid-cols-3 gap-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">員工 <span className="text-red-500">*</span></label>
|
||
{employees && employees.length > 0 ? (
|
||
<select
|
||
value={createName}
|
||
onChange={(e) => setCreateName(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
>
|
||
<option value="">-- 揀員工 --</option>
|
||
{employees.map(e => <option key={e} value={e}>{e}</option>)}
|
||
{!employees.includes(createName) && createName && (
|
||
<option value={createName}>{createName} (新)</option>
|
||
)}
|
||
</select>
|
||
) : (
|
||
<input
|
||
type="text"
|
||
value={createName}
|
||
onChange={(e) => setCreateName(e.target.value)}
|
||
placeholder="員工姓名"
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
)}
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">日期 <span className="text-red-500">*</span></label>
|
||
<input
|
||
type="date"
|
||
value={createDate}
|
||
onChange={(e) => setCreateDate(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">審批人</label>
|
||
<input
|
||
type="text"
|
||
value={createApprovedBy}
|
||
onChange={(e) => setCreateApprovedBy(e.target.value)}
|
||
placeholder="Manager A"
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Rows */}
|
||
<div>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<label className="text-sm font-medium text-slate-700">
|
||
請假項目 <span className="text-red-500">*</span>
|
||
<span className="ml-2 text-xs text-slate-400">(同日可以加 SL/CL/AL 不同類型)</span>
|
||
</label>
|
||
<button
|
||
type="button"
|
||
onClick={addRow}
|
||
className="inline-flex items-center gap-1 px-2 py-1 text-xs bg-slate-100 hover:bg-slate-200 text-slate-700 rounded"
|
||
>
|
||
<Plus size={12} /> 加多一條
|
||
</button>
|
||
</div>
|
||
<div className="space-y-2">
|
||
{rows.map((row, idx) => (
|
||
<div key={idx} className="flex items-start gap-2 p-2 bg-slate-50 rounded-md border border-slate-200">
|
||
{/* Type buttons (vertical) */}
|
||
<div className="flex flex-col gap-1 shrink-0">
|
||
{LEAVE_TYPES.map(t => (
|
||
<button
|
||
key={t.value}
|
||
type="button"
|
||
onClick={() => updateRow(idx, 'leave_type', t.value)}
|
||
className={`px-3 py-1 rounded text-xs font-medium border min-w-[3rem] ${
|
||
row.leave_type === t.value
|
||
? t.color === 'pink' ? 'bg-pink-100 border-pink-400 text-pink-700'
|
||
: t.color === 'indigo' ? 'bg-indigo-100 border-indigo-400 text-indigo-700'
|
||
: 'bg-emerald-100 border-emerald-400 text-emerald-700'
|
||
: 'bg-white border-slate-200 text-slate-500'
|
||
}`}
|
||
>
|
||
{t.value}
|
||
</button>
|
||
))}
|
||
</div>
|
||
{/* Hours */}
|
||
<div className="flex-1 min-w-0">
|
||
<input
|
||
type="number"
|
||
step="0.5"
|
||
min="0"
|
||
max="24"
|
||
value={row.hours}
|
||
onChange={(e) => updateRow(idx, 'hours', e.target.value)}
|
||
className="w-full px-2 py-1.5 border border-slate-300 rounded-md text-sm"
|
||
placeholder="時數"
|
||
/>
|
||
<div className="flex gap-1 mt-1">
|
||
{[1, 2, 4, 8].map(h => (
|
||
<button
|
||
key={h}
|
||
type="button"
|
||
onClick={() => updateRow(idx, 'hours', h)}
|
||
className="px-1.5 py-0.5 text-xs bg-white border border-slate-200 hover:bg-slate-100 rounded"
|
||
>
|
||
{h}h
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
{/* Reason */}
|
||
<div className="flex-1 min-w-0">
|
||
<input
|
||
type="text"
|
||
value={row.reason}
|
||
onChange={(e) => updateRow(idx, 'reason', e.target.value)}
|
||
placeholder="原因 (optional)"
|
||
className="w-full px-2 py-1.5 border border-slate-300 rounded-md text-sm"
|
||
/>
|
||
</div>
|
||
{/* Remove */}
|
||
{rows.length > 1 && (
|
||
<button
|
||
type="button"
|
||
onClick={() => removeRow(idx)}
|
||
className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded shrink-0"
|
||
title="移除"
|
||
>
|
||
<X size={14} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Result summary */}
|
||
{results && (
|
||
<div className="text-xs bg-slate-50 border border-slate-200 rounded-md p-2">
|
||
<div>加咗 <b className="text-emerald-700">{results.added}</b> / Skip <b className="text-amber-700">{results.skipped.length}</b> / 失敗 <b className="text-red-700">{results.failed.length}</b> / 總共 {results.total}</div>
|
||
{(results.skipped.length > 0 || results.failed.length > 0) && (
|
||
<details className="mt-1">
|
||
<summary className="cursor-pointer text-slate-600">詳細</summary>
|
||
<div className="mt-1 text-slate-500 space-y-0.5">
|
||
{results.skipped.map((s, i) => (
|
||
<div key={i}>• Skip {s.row.leave_type} {s.row.hours}h {s.row.reason}: {s.reason}</div>
|
||
))}
|
||
{results.failed.map((f, i) => (
|
||
<div key={i}>• 失敗 {f.row.leave_type} {f.row.hours}h: {f.reason}</div>
|
||
))}
|
||
</div>
|
||
</details>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="px-5 py-3 border-t border-slate-200 flex justify-between gap-2 bg-slate-50">
|
||
<div className="text-xs text-slate-500 self-center">
|
||
{validCount} 條有效 · 總時數 {totalHours}h
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button onClick={onClose} className="px-4 py-1.5 text-slate-600 hover:bg-slate-100 rounded-md text-sm">
|
||
取消
|
||
</button>
|
||
<button
|
||
onClick={handleSaveCreate}
|
||
disabled={saving}
|
||
className="px-4 py-1.5 bg-primary-600 text-white rounded-md text-sm font-medium hover:bg-primary-700 disabled:opacity-50"
|
||
>
|
||
{saving ? '儲存中...' : `加 ${validCount} 條`}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|