Web制作・Web開発
勤怠管理システム
React / Express / Prisma / MySQL / Docker
勤務ルールに沿った打刻、個人／管理月次レポート、社員別Excel出力
01
毎日の勤怠操作を、ひとつの画面でシンプルに!
出勤・退勤・休憩の打刻、本日の勤務状況、打刻忘れの事後申請をひとつの画面にまとめました。勤務ルールに基づく予定時刻と実際の打刻時刻を並べて表示し、現在の状態をすぐに確認できます。利用頻度の高い操作を大きなボタンで配置し、社員が迷わず使える画面設計を意識しました。
02
打刻漏れがひと目でわかる、月次の勤怠記録
年月を切り替えて、1か月分の勤怠記録を一覧で確認できます。打刻のある日だけでなく月初から月末までの全日を表示するため、打刻漏れの日が「未打刻」として自然に浮かび上がります。記録のある日は濃く、未打刻の日はグレーで表示することで、目視での確認負荷を下げました。事後申請で登録した日には「事後」バッジを付け、通常の打刻と区別できるようにしています。
03
月次の集計と明細を、そのままExcelへ
指定した年月の勤怠を、上部の集計カードと下部の明細表で確認できます。出勤日数・遅刻・早退・欠勤・総勤務時間を一目で把握でき、明細では勤務ルールの標準時刻と休憩、実際の勤務時間を日ごとに追えます。表示中の内容はそのままExcelに出力でき、月末の勤怠提出や給与計算への受け渡しをそのまま行える形式にしました。
04
社員全体を見渡して、気になるところを詳しく見る
管理者向けに、年月と社員で絞り込んだ全社の勤怠状況を確認できます。上部で全体の集計を把握し、社員一覧では各自の日数・遅刻・早退・勤務時間を並べて比較できます。「明細」から必要な社員だけを展開する構成にして、初期表示の情報量を抑えました。勤怠が1件もない社員も一覧に残すことで、打刻していない社員の見落としを防いでいます。Excel出力では社員ごとにシートを分け、そのまま各人へ配布できる形にしました。
05
勤務形態の違いを、コードを変えずに設定で吸収
出退勤時刻、休憩、遅刻・早退の許容分数、フレックスの可否を組み合わせて、勤務ルールを自由に登録できます。ここで作ったルールは打刻画面で選択でき、遅刻・早退の判定や休憩の自動設定にそのまま反映されます。固定勤務とフレックスのように運用が異なる働き方も、実装を変えずに設定だけで追加できる構成にしました。運用中のルールは削除ではなく無効化とし、過去の勤怠記録との整合性を保っています。
まずはお気軽にご相談ください
お客様のビジネスを深く理解し、最適なソリューションをご提案します。