這是我替 某工業配件／管材相關企業 實作的內部「系統管理」平台（客戶名稱匿名）。目標很務實：現場同仁要打卡、請假、寫工作日誌；人資要管出勤與薪資；物料單位要顧進銷存——如果拆成多套工具，最後一定對不齊。
線上 Demo
可直接開啟體驗版本：
- 網址：https://0x-system-management.netlify.app/
- 示範帳號：
A001（密碼同帳號）；A001～A010都可以登入 - 登入頁上可以直接點示範帳號帶入
此為作品展示用環境，使用模擬資料、不連後端：打卡、出勤總覽、請假、請假紀錄、LINE 通知（模擬）與通知版本管理都能操作，資料只存在你的瀏覽器。正式客戶環境與資料另外部署，不在此示範站。
解決什麼問題？
傳統用即時通訊、Excel、紙本分散處理出勤與進貨時，常出現：
- 忘打卡沒人提醒
- 請假狀態口頭說了卻沒留下紀錄
- 專案用料難以回頭查
- 薪資計算依賴人工表、出錯成本高
這套系統把流程收斂到同一個登入入口，依權限顯示不同功能。
技術架構
| 層級 | 技術 |
|---|---|
| 前端 | React 18、Vite、React Router、Bootstrap、react-big-calendar |
| 後端 | Node.js、Express、WebSocket、node-cron |
| 資料庫 | Microsoft SQL Server |
| 整合 | LINE 通知（出勤提醒）、PDF／Excel 匯出 |
開發時前後端分離；正式環境可由 Express 同時提供 API 與前端靜態檔，方便部署在客戶指定環境。
主要模組
- 打卡與出勤：選擇場地打卡、出勤查詢、加班、行事曆視圖
- 請假：申請、紀錄、主管核准（待審數量會顯示在導覽）
- 工作日誌：當日紀錄＋多圖上傳
- 物料／專案：進貨、用量、專案關聯
- 人資：人員資料、薪資計算（勞健保、加班、津貼等）、PDF 匯出
- 設備保養：依場地／樓層拍照與打包下載
前端用模組化資料夾（出勤、人資、物料、日誌）拆開，後端走路由 → controller → SQL connection pool 的結構，之後加功能比較不會整坨黏在一起。
實作上印象深刻的點
- 權限數字化：角色用數字代碼存在前端狀態，頁面依權限顯示或隱藏功能。實用，但也要記得重要 API 後端還要再驗一次。
- 排程與 LINE 通知：用 cron 處理忘打卡、請假狀態更新；出勤相關提醒透過 LINE 通知推送，補上「人沒盯電腦螢幕」時也能收到訊息。例如上下班漏打卡時，系統會發 LINE 提醒，讓現場同仁不用一直開著後台。
- 即時感：WebSocket 用來推狀態；打卡頁也強調即時時間與場地情境。
- 報表：Excel／PDF 匯出是人資真正會天天用的功能，UI 華麗不如輸出正確。
回頭看
這類專案的價值不在酷炫動畫，而在把客戶每日工作節奏摸清楚。程式可以重構，但如果流程對不上現場，系統不會有人用。
若你也在幫傳產或中小企業做內部系統，建議優先對齊：誰每天打開？最怕漏什麼資料？報表要匯出成什麼格式？ 這三題答完，架構選擇會清楚很多。