回到專案列表
近期專案
租車與維修紀錄系統
整合租借與維修管理的全端系統，含多角色權限、儀表板統計、電子簽名與估價單寄送。
- 功能畫面
- 11個功能畫面
- 使用者身份權限
- 2種使用者身份權限
- 核心資料表關聯
- 4張核心資料表關聯
ReactNext.jsTypeScriptPrismaSupabase
問題
租借與維修原本是兩條各自獨立的流程，同一台車的歷史散落在不同紀錄裡。要回答「這台車上次保養是什麼時候、上一位租的人是誰」，得靠人工翻找比對。
限制條件
- 員工與客戶兩種身份，看得到的資料範圍必須不同
- 車況需要照片佐證，租還前後都要留存
- 估價單必須能直接寄給客戶，不能只是畫面上看得到
- 客戶要能自己查詢往來紀錄，減少電話詢問
關鍵決策
用 Prisma 把車輛、客戶、租借、維修四者的關聯明確建模
為什麼：關聯寫進 schema，跨表查詢就能一次完成。若只把資料表當儲存空間、在前端拼湊，每加一種查詢角度都要改動前端。
租借紀錄區分「首次租車」與「一般租車」兩種流程
為什麼：首次租車需要建檔與簽名，一般租車不必。用同一張表塞所有欄位會讓兩種情境都變得難用。
估價單走伺服器端組裝後寄出，而非前端產生
為什麼：寄出的內容必須與資料庫一致，不能受前端狀態影響。
結果
交付 11 個功能畫面、2 種身份權限。「這台車的完整歷史」從人工比對變成一次查詢，客戶也能自助查閱往來紀錄與電子簽名。
主要功能
- 登入畫面：支援多位使用者以及不同身份權限
- 登入後首頁儀表板與基礎統計
- 保養維修清單畫面
- 單一客戶紀錄詳情畫面
- 單一客戶估價單下載畫面，可直接郵寄給客戶（與租車紀錄共用同一套寄送流程）
- 客戶資料完整 CRUD
- 出租紀錄清單畫面
- 出租紀錄新增畫面：可上傳車輛狀況照片，並區分「首次租車」與「一般租車」流程
- 單一出租紀錄詳情畫面：包含車況照片，可將完整資訊郵寄給客戶
- 客戶身份登入介面：可新增資料並支援電子簽名
- 顧客基本資料畫面：可調閱該顧客的所有歷史紀錄
技術重點
資料層以 Prisma 定義 schema 並操作 PostgreSQL（Supabase），把車輛、客戶、租借紀錄、維修紀錄之間的關聯明確建模，讓跨表查詢（例如「某位客戶的所有租借與維修紀錄」）能用單一查詢完成，而不是在前端拼湊資料。
照片上傳與估價單寄送是這個專案最花時間的兩塊：前者要處理儲存與取用權限，後者要把資料庫內容組成可閱讀的文件再寄出。
畫面截圖
1 / 8登入後首頁：儀表板與基礎統計