Add Settings page, List page, report template

frontend/src/pages/List.jsx

@@ -0,0 +1,317 @@
+import { useState, useEffect, useMemo } from 'react'
+import { Link } from 'react-router-dom'
+import api from '../../api'
+import toast from 'react-hot-toast'
+import { Search, Eye, ChevronUp, ChevronDown, Filter, X, AlertCircle, Clock, FileCode } from 'lucide-react'
+
+const handleExportHTML = (section) => {
+  const token = localStorage.getItem('aars_token')
+  if (token) {
+    window.open(`/api/report/${section}/html?token=${token}`, '_blank')
+  }
+}
+
+export default function AttendanceList() {
+  const [records, setRecords] = useState([])
+  const [headers, setHeaders] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [sortKey, setSortKey] = useState(null)
+  const [sortDir, setSortDir] = useState('asc')
+  const [filterKey, setFilterKey] = useState('')
+  const [filterValue, setFilterValue] = useState('')
+  const [latenessRecords, setLatenessRecords] = useState([])
+
+  useEffect(() => {
+    fetchRecords()
+    fetchLateness()
+  }, [])
+
+  const fetchRecords = async () => {
+    setLoading(true)
+    try {
+      const { data } = await api.get('/api/attendance?page=1&page_size=1000')
+      setRecords(data.data || [])
+      
+      if (data.data && data.data.length > 0) {
+        const keys = Object.keys(data.data[0]).filter(k => k !== '_row')
+        setHeaders(keys)
+      }
+    } catch (err) {
+      toast.error('Failed to load records')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const fetchLateness = async () => {
+    try {
+      const { data } = await api.get('/api/attendance/lateness/records')
+      setLatenessRecords(data || [])
+    } catch (err) {
+      console.error('Failed to load lateness data:', err)
+    }
+  }
+
+  // Create a map of late records for quick lookup
+  const latenessMap = useMemo(() => {
+    const map = {}
+    latenessRecords.forEach(rec => {
+      const key = `${rec.staff}-${rec.date}`
+      map[key] = rec
+    })
+    return map
+  }, [latenessRecords])
+
+  // Filtered and sorted data
+  const processedData = useMemo(() => {
+    let result = [...records]
+    
+    // Filter
+    if (filterKey && filterValue) {
+      result = result.filter(r => {
+        const val = String(r[filterKey] || '').toLowerCase()
+        return val.includes(filterValue.toLowerCase())
+      })
+    }
+    
+    // Search
+    if (search) {
+      const searchLower = search.toLowerCase()
+      result = result.filter(r =>
+        Object.values(r).some(v => 
+          v && String(v).toLowerCase().includes(searchLower)
+        )
+      )
+    }
+    
+    // Sort
+    if (sortKey) {
+      result.sort((a, b) => {
+        const aVal = a[sortKey] || ''
+        const bVal = b[sortKey] || ''
+        const aNum = Number(aVal)
+        const bNum = Number(bVal)
+        
+        let cmp = 0
+        if (!isNaN(aNum) && !isNaN(bNum)) {
+          cmp = aNum - bNum
+        } else {
+          cmp = String(aVal).localeCompare(String(bVal))
+        }
+        return sortDir === 'asc' ? cmp : -cmp
+      })
+    }
+    
+    return result
+  }, [records, search, sortKey, sortDir, filterKey, filterValue])
+
+  const handleSort = (key) => {
+    if (sortKey === key) {
+      setSortDir(sortDir === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortKey(key)
+      setSortDir('asc')
+    }
+  }
+
+  const handleFilter = (key) => {
+    setFilterKey(key)
+    setFilterValue('')
+  }
+
+  const clearFilter = () => {
+    setFilterKey('')
+    setFilterValue('')
+  }
+
+  const getSortIcon = (key) => {
+    if (sortKey !== key) return null
+    return sortDir === 'asc' ? <ChevronUp size={14} /> : <ChevronDown size={14} />
+  }
+
+  // Get lateness info for a record
+  const getLatenessInfo = (record) => {
+    // Find staff name and date columns
+    const staffKey = Object.keys(record).find(k => 
+      k.toLowerCase().includes('staff') || k.toLowerCase().includes('name') || k.toLowerCase().includes('員工')
+    )
+    const dateKey = Object.keys(record).find(k => 
+      k.toLowerCase().includes('date') || k.toLowerCase().includes('日期')
+    )
+    
+    if (!staffKey || !dateKey) return null
+    
+    const staff = record[staffKey]
+    const date = record[dateKey]
+    
+    if (!staff || !date) return null
+    
+    const key = `${staff}-${String(date).slice(0, 10)}`
+    return latenessMap[key]
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-bold text-slate-900">出勤記錄 Attendance</h1>
+        <div className="flex gap-2">
+          <button
+            onClick={() => handleExportHTML('attendance')}
+            className="flex items-center gap-2 px-4 py-2 bg-slate-700 text-white text-sm rounded-md hover:bg-slate-800"
+          >
+            <FileCode size={16} />
+            匯出 HTML Report
+          </button>
+          <Link
+            to="/upload"
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700"
+          >
+            上傳 Excel
+          </Link>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="card p-3">
+        <div className="flex flex-wrap gap-3">
+          {/* Search */}
+          <div className="relative flex-1 min-w-[200px]">
+            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="搜尋所有欄位..."
+              className="w-full pl-9 pr-4 py-2 text-sm border border-slate-300 rounded-md"
+            />
+          </div>
+          
+          {/* Column Filter */}
+          <div className="flex items-center gap-2">
+            <Filter size={16} className="text-slate-400" />
+            <select
+              value={filterKey}
+              onChange={(e) => handleFilter(e.target.value)}
+              className="text-sm border border-slate-300 rounded-md px-2 py-2"
+            >
+              <option value="">篩選欄位</option>
+              {headers.slice(0, 6).map(h => (
+                <option key={h} value={h}>{h}</option>
+              ))}
+            </select>
+            
+            {filterKey && (
+              <>
+                <input
+                  type="text"
+                  value={filterValue}
+                  onChange={(e) => setFilterValue(e.target.value)}
+                  placeholder="輸入篩選值..."
+                  className="text-sm border border-slate-300 rounded-md px-2 py-2 w-32"
+                />
+                <button onClick={clearFilter} className="p-1 text-slate-400 hover:text-slate-600">
+                  <X size={16} />
+                </button>
+              </>
+            )}
+          </div>
+          
+          {/* Result count */}
+          <div className="text-sm text-slate-500 py-2">
+            {processedData.length} 筆記錄
+            {latenessRecords.length > 0 && (
+              <span className="ml-2 text-orange-600">
+                • {latenessRecords.length} 筆遲到
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="card overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead className="bg-slate-100 border-b border-slate-200">
+              <tr>
+                <th className="px-3 py-2 text-left text-xs font-semibold text-slate-600 w-12">#</th>
+                {headers.slice(0, 6).map(h => (
+                  <th 
+                    key={h} 
+                    className="px-3 py-2 text-left text-xs font-semibold text-slate-600 cursor-pointer hover:bg-slate-200"
+                    onClick={() => handleSort(h)}
+                  >
+                    <div className="flex items-center gap-1">
+                      {h}
+                      {getSortIcon(h)}
+                    </div>
+                  </th>
+                ))}
+                <th className="px-3 py-2 text-center text-xs font-semibold text-slate-600 w-20">狀態</th>
+                <th className="px-3 py-2 text-right text-xs font-semibold text-slate-600 w-16">操作</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {loading ? (
+                <tr>
+                  <td colSpan={9} className="px-3 py-6 text-center text-slate-400">
+                    載入中...
+                  </td>
+                </tr>
+              ) : processedData.length === 0 ? (
+                <tr>
+                  <td colSpan={9} className="px-3 py-6 text-center text-slate-400">
+                    沒有記錄
+                  </td>
+                </tr>
+              ) : (
+                processedData.map((record) => {
+                  const lateInfo = getLatenessInfo(record)
+                  const isLate = lateInfo && lateInfo.minutes_late > 0
+                  
+                  return (
+                    <tr 
+                      key={record._row} 
+                      className={`hover:bg-slate-50 cursor-pointer ${isLate ? 'bg-orange-50' : ''}`}
+                      onClick={() => window.location.href = `/attendance/${record._row}`}
+                    >
+                      <td className="px-3 py-2 text-xs text-slate-400">{record._row}</td>
+                      {headers.slice(0, 6).map(h => (
+                        <td key={h} className="px-3 py-2 text-slate-700 max-w-xs truncate">
+                          {record[h] !== null && record[h] !== undefined ? String(record[h]) : '-'}
+                        </td>
+                      ))}
+                      <td className="px-3 py-2 text-center">
+                        {isLate ? (
+                          <div className="flex items-center justify-center gap-1 text-orange-600" title={`遲到 ${lateInfo.minutes_late} 分鐘`}>
+                            <AlertCircle size={14} />
+                            <span className="text-xs font-medium">{lateInfo.minutes_late}分</span>
+                          </div>
+                        ) : (
+                          <div className="flex items-center justify-center gap-1 text-green-600">
+                            <Clock size={14} />
+                            <span className="text-xs">正常</span>
+                          </div>
+                        )}
+                      </td>
+                      <td className="px-3 py-2 text-right" onClick={(e) => e.stopPropagation()}>
+                        <Link
+                          to={`/attendance/${record._row}`}
+                          className="p-1 text-slate-400 hover:text-primary-600 inline-block"
+                        >
+                          <Eye size={16} />
+                        </Link>
+                      </td>
+                    </tr>
+                  )
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/Settings.jsx

@@ -0,0 +1,143 @@
+import { useState } from "react"
+import { Trash2, AlertTriangle, Shield } from "lucide-react"
+import api from "../api"
+
+const RESET_SECTIONS = [
+  {
+    key: "attendance",
+    label: "出勤 Attendance",
+    description: "刪除所有出勤記錄（attendance_records 全表清空）",
+    color: "red",
+  },
+  {
+    key: "accident",
+    label: "意外 Accident",
+    description: "刪除所有意外記錄（accidents 全表清空）",
+    color: "orange",
+  },
+  {
+    key: "holidays",
+    label: "假期 Holidays + Leave",
+    description: "刪除所有公眾假期 + 員工請假記錄",
+    color: "amber",
+  },
+]
+
+export default function Settings() {
+  const [confirmText, setConfirmText] = useState({})
+  const [loading, setLoading] = useState({})
+  const [result, setResult] = useState({})
+
+  const handleReset = async (section) => {
+    const confirmVal = confirmText[section] || ""
+    if (confirmVal !== section) {
+      setResult((prev) => ({ ...prev, [section]: { error: `請輸入 "${section}" 以確認刪除` } }))
+      return
+    }
+
+    setLoading((prev) => ({ ...prev, [section]: true }))
+    setResult((prev) => ({ ...prev, [section]: null }))
+
+    try {
+      const res = await api.post(`/api/admin/reset/${section}`, { confirm: section })
+      setResult((prev) => ({
+        ...prev,
+        [section]: {
+          success: `已刪除 ${res.data.deleted} 條記錄`,
+        },
+      }))
+      setConfirmText((prev) => ({ ...prev, [section]: "" }))
+    } catch (err) {
+      setResult((prev) => ({
+        ...prev,
+        [section]: {
+          error: err.response?.data?.detail || err.message || "刪除失敗",
+        },
+      }))
+    } finally {
+      setLoading((prev) => ({ ...prev, [section]: false }))
+    }
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-6">
+      <div className="flex items-center gap-3">
+        <Shield className="w-6 h-6 text-slate-700" />
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900">系統管理</h1>
+          <p className="text-sm text-slate-500 mt-0.5">
+            危險操作，請小心使用
+          </p>
+        </div>
+      </div>
+
+      {/* Danger Zone */}
+      <div className="bg-white border border-red-200 rounded-xl overflow-hidden">
+        <div className="px-5 py-4 border-b border-red-100 bg-red-50/50">
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="w-5 h-5 text-red-600" />
+            <h2 className="text-lg font-semibold text-red-800">Danger Zone — 資料庫重置</h2>
+          </div>
+          <p className="text-sm text-red-600 mt-1">
+            以下操作將永久刪除資料，無法復原。請確認後再執行。
+          </p>
+        </div>
+
+        <div className="divide-y divide-slate-100">
+          {RESET_SECTIONS.map((section) => {
+            const res = result[section.key]
+            const isLoading = loading[section.key]
+
+            return (
+              <div key={section.key} className="px-5 py-4">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                  <div className="flex-1">
+                    <h3 className="font-semibold text-slate-900">{section.label}</h3>
+                    <p className="text-sm text-slate-500 mt-0.5">{section.description}</p>
+                  </div>
+
+                  <div className="flex items-center gap-3">
+                    <input
+                      type="text"
+                      className="w-32 px-3 py-2 text-sm border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 placeholder:text-slate-400"
+                      placeholder={`輸入 "${section.key}"`}
+                      value={confirmText[section.key] || ""}
+                      onChange={(e) => {
+                        setConfirmText((prev) => ({ ...prev, [section.key]: e.target.value }))
+                        setResult((prev) => ({ ...prev, [section.key]: null }))
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") handleReset(section.key)
+                      }}
+                    />
+                    <button
+                      onClick={() => handleReset(section.key)}
+                      disabled={isLoading || (confirmText[section.key] || "") !== section.key}
+                      className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 disabled:bg-slate-300 disabled:cursor-not-allowed rounded-md transition-colors"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                      {isLoading ? "刪除中..." : "重置"}
+                    </button>
+                  </div>
+                </div>
+
+                {/* Result message */}
+                {res && (
+                  <div
+                    className={`mt-3 text-sm px-3 py-2 rounded-md ${
+                      res.error
+                        ? "bg-red-50 text-red-700 border border-red-200"
+                        : "bg-green-50 text-green-700 border border-green-200"
+                    }`}
+                  >
+                    {res.error ? `❌ ${res.error}` : `✅ ${res.success}`}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}