Local-First & Privacy-Focused Time, Billing & Revenue Management Tool
一款專為自由工作者（Freelancers）、獨立顧問（Consultants）與外包接案者打造的**本機優先（Local-First）**工時記錄、客戶對帳請款與年度財務管理工具。
- 🛡️ 100% 隱私與資料本地化（Local-First）
所有專案、工時明細與財務紀錄皆儲存在您本機的~/Documents/TimeTrackerData.json。零雲端上傳、不依賴外部資料庫、零連網 API 額度消耗，即便在無網路環境下也能順暢使用。 - ⏱️ 流暢計時與智慧工作分類（Smart Taxonomy）
支援即時碼錶打卡、手動補登工時，並內建智能關鍵字辨識（如研究、訪談、文案、會議、開發等），自動歸類工作性質與專案 WBS 子項目。 - 💼 雙軌計費模式（Dual Billing Engine）
- 計時發薪（Hourly）：依實際投入工時自動換算累計產值，無合約欠款負擔。
- 固定金額 / 分潤（Fixed Contract）：依合約總金額追蹤各期入帳進度、實質時薪與尚欠尾款。
- 📋 時間軸月度請款與對帳中心（Timeline Billing Statement）
按月份與發款客戶，依時間軸流水帳（由先到後）一鍵彙整每日工作紀錄，支援一鍵複製請款文字（直接貼到通訊軟體 / Email）與一鍵月薪登記入帳。 - 📊 年度財務目標與客戶金流看板（Annual Goals & Cashflow）
即時視覺化年度達標進度、主要客戶營收排名、尾款收齊狀態，並支援全站多標籤靈活複選篩選（Multi-Select Filter）。 - 🚀 極簡啟動（One-Click Launch）
Mac 用戶雙擊WorkTime.command即可於 1 秒內在背景啟動本地輕量伺服器並自動開啟網頁。
本系統將接案工作抽象為 「專案核心 4 大維度」，兼顧「系統標準化統計」與「自由客製化彈性」：
flowchart TD
subgraph 專案管理 4 大核心維度
A["1. 專案類別<br>（目標本質）"]
B["2. 專案狀態<br>（生命週期）"]
C["3. 計費模式<br>（收益形式）"]
D["4. 預算/合約金額<br>（報酬規模）"]
end
A --> A1["💼 商業委託<br>🌱 公益奉獻<br>💡 自修創作"]
B --> B1["💡 提案/開拓中<br>🟢 執行中<br>🚨 待請款<br>📁 歷史結案"]
C --> C1["⏱️ 計時發薪（自動算產值）<br>💼 固定金額（算尾款與實質時薪）"]
D --> D1["使用者自填數字（無則留空）"]
| 收費模式 | 適用接案情境 | 系統運算機制 | 財務追蹤指標 |
|---|---|---|---|
| ⏱️ 計時發薪 / 月結回報 ( hourly) |
• 按月回報工時之長期兼職/外包 • 計時顧問與諮詢服務 • 工時不確定性高之委託 |
• 自動依投入工時換算累計產值：產值 = 工時 × 時薪標準• 請款報表中可隨時自訂時薪標準 |
• ⏱️ 累計工時 • 💵 累計產值 • ⚡ 時薪標準（可自訂） • 無合約欠款負擔 |
| 💼 專案固定金額 / 分潤 ( fixed) |
• 統包專案（如專案建置案） • 分期付款（訂金/期中/尾款） • 固定分潤合約 |
• 自動比對合約總額與實際入帳：尚欠尾款 = 合約總額 - 已收金額實質時薪 = 已收金額 ÷ 總工時 |
• ⏱️ 累計工時 • 💵 專案已收金額 • 🚨 尚欠尾款進度 • ⚡ 實質換算時薪 |
為了確保資料統計與財務流水線精準運作，同時給予使用者最大彈性，欄位規範如下：
| 欄位 / 模組 | 設定機制 | 選項內容 / 說明 |
|---|---|---|
| 專案名稱 | ✍️ 完全自填 | 使用者自由命名（例如：品牌形象設計、企業顧問諮詢）。 |
| 合作單位 / 客戶組織 | 🤖 自由自填 + 智慧記憶 | 自由輸入任何合作單位或客戶名稱（例如：合作夥伴、顧問合作）。系統會自動提取現有單位建立下拉建議清單（Datalist）。 |
| 專案類別 | ⚙️ 系統標準（3 選 1） | • 💼 商業委託 (commercial)：一般商業營利案件• 🌱 公益奉獻 ( pro_bono)：非營利 / 志願服務• 💡 自修創作 ( self_study)：個人研究 / 作品產出 |
| 專案狀態 | ⚙️ 系統標準（4 選 1） | • 💡 提案/開拓中 (bidding)：評估投標中• 🟢 執行中 ( active)：正在投入工時• 🚨 待請款 ( pending_payment)：工作完成待結算• 📁 歷史結案 ( closed)：已驗收結案存檔 |
| 計費模式 | ⚙️ 系統標準（2 選 1） | • ⏱️ 計時發薪 (hourly)• 💼 固定金額/分潤 ( fixed) |
| 合約總額 | ✍️ 完全自填 | 固定合約填入總報酬（例如：100,000）；純計時案可留空。 |
| 專案 WBS 子項目 | 🏷️ 完全自填 | 可在專案設定內自訂該專案的任務標籤（例如：調研訪談、架構規劃、介面設計）。 |
| 工作性質分類 | ⚙️ 預設 10 大類 + 關鍵字辨識 | 內建 10 種常見接案任務類型（AI 提示詞、研究、訪談、文案、會議、開發等），打卡時自動匹配。 |
| 年度目標金額 | 🎯 完全自填 | 使用者在「財務目標」頁面自行設定每年的目標總營收。 |
| 月度請款時薪 | ⚡ 彈性自訂 | 請款報表提供時薪標準輸入框，可隨時自訂任何費率進行即時試算。 |
flowchart LR
A["⏱️ 1. 當日計時 (Timer)"] --> B["📂 2. 專案管理 (Dashboard)"]
B --> C["🔍 3. 專案細節 (Details)"]
C --> D["📋 4. 月度請款 (Export)"]
D --> E["💰 5. 財務營收 (Annual Goals)"]
A -. "打卡 / 補登工時" .-> B
B -. "流水線 / 產值追蹤" .-> C
C -. "工作紀錄與 WBS 統計" .-> D
D -. "一鍵複製請款 / 一鍵入帳" .-> E
E -. "年度目標與尾款催收" .-> A
- 進入首頁，由全站統一選單挑選正在進行的專案。
- 點擊「開始計時」或輸入時數手動補登。
- 系統自動依工作描述關鍵字匹配工作性質標籤（如
🎤 專家訪談、🛠️ 架構規劃）。
- 透過頂部「狀態流水線」即時掌握 🟢 執行中、💡 提案/開拓中、🚨 待請款 專案（支援多標籤同時勾選）。
- 卡片即時呈現：累計工時、產值（計時案）或已收款項（固定案）、實質時薪。
- 查看該專案的累計工時柱狀圖與每日明細。
- 自動萃取動態任務主題聚類（WBS Breakdown），作為未來向合作單位提案與報價的工時基準。
- 選擇合作單位與結算月份。
- 系統自動產出依時間軸排序的工作流水帳與各專案時數小計。
- 點擊 【📋 一鍵複製請款文字】 ➔ 直接發送給合作單位對帳。
- 款項入帳後點擊 【✅ 登記本月薪資入帳】 ➔ 自動寫入總營收，無需手動拆帳。
- 設定年度目標金額，即時查看達標百分比與月份營收趨勢圖。
- 主要客戶營收排行：一眼看出年度前三大營收貢獻客戶。
- 專案尾款追蹤：支援複選篩選（如同時查看「案源開拓」+「歷史結案」）。
- 金流明細：按客戶單位與關鍵字多維度檢索每一筆歷史收款。
本專案採用 Local-First Web Architecture，完全不依賴肥大的前端框架與第三方雲端服務：
Time Tracker/
├── WorkTime.command # Mac 一鍵啟動腳本
├── server.py # 本地輕量 HTTP API 伺服器 (Python 原生標準庫)
├── index.html # 單頁應用程式結構 (SPA HTML5)
├── assets/
│ ├── css/
│ │ ├── variables.css # 設計系統樣式變數 (Design Tokens)
│ │ ├── style.css # 全域排版與基礎樣式
│ │ ├── components.css # 卡片、按鈕、表格、Chips 元件樣式
│ │ └── animations.css # 轉場與微動畫
│ └── js/
│ ├── app.js # SPA 路由管理與視圖生命週期
│ ├── db.js # 本地 API 通訊與跨分頁事件廣播 (BroadcastChannel)
│ ├── utils.js # 通用工具庫、選單生成器與業務計算引擎
│ └── views/ # 視圖模組 (Timer, Dashboard, Details, AnnualGoals, Export)
├── LICENSE # MIT 開源授權
└── README.md
- 前端：Vanilla HTML5 + Modern CSS + Native JavaScript (ES6+)。
- 後端：Python 3 原生
http.server，提供原子寫入（Atomic File Replacement）機制的 RESTful 本地 API。 - 資料庫：儲存於本機
~/Documents/TimeTrackerData.json，格式純粹透明、隨時可備份或移轉。
- 作業系統：macOS / Linux / Windows
- 環境依賴：Python 3.x（macOS 系統已內建）
- 瀏覽器：Chrome、Firefox、Safari、Edge 等現代瀏覽器
-
Clone 本專案至本機：
git clone https://github.com/Legendream/TimeTracker.git cd TimeTracker -
啟動應用程式：
- macOS（推薦）：直接雙擊執行目錄下的
WorkTime.command。 - 手動終端機啟動：
啟動後開啟瀏覽器訪問：
python3 server.py
http://127.0.0.1:5500/Time%20Tracker/index.html。
- macOS（推薦）：直接雙擊執行目錄下的
-
初次使用：
- 系統會自動在您的使用者家目錄
~/Documents/TimeTrackerData.json建立空白資料庫。 - 前往「專案管理」新增您的第一個專案，即可開始打卡計時！
- 系統會自動在您的使用者家目錄
- 備份資料：只需複製本機的
~/Documents/TimeTrackerData.json即可完成完整備份。 - 還原資料：將備份的 JSON 檔案放回
~/Documents/並重新開啟網頁即可。 - 隱私聲明：本工具不包含任何遠端追蹤碼（Telemetry）、分析工具（Analytics）或外部 API 呼叫，您的工時與財務數字永遠只留在您的硬碟中。
本專案採用 MIT License 授權開源，歡迎自由使用、修改與分享！