概要
この度、初めてのフルリモートワークがスタートしました。
通勤がなくなる快適さの反面、勤怠が完全な自己管理となり、「作業に集中していると、絶対に毎日の打刻を忘れそう……」というリアルな課題に直面しており、せっかくなら学習も兼ねてこの身近な課題を技術で解決しようと思います。
以前から触れてみたかったクラウド技術のキャッチアップを目的としつつ、自分が毎日便利に使える「クラウドベースの勤怠管理システム」を開発してみることにしました。
第一弾として、システム構成と画面構成を決めていきます。
また、下記のイメージ図にSlackとLINEが描かれていますが、時間があったら連携したいと思います。
※Geminiで生成した画像です。
システム構成
- フロントエンド
言語：TypeScript
フレームワーク：React
主なライブラリ：React Router, TanStack Query, Chakra UI
データフェッチングが主になると思うので、TanStack Queryを採用。
- バックエンド
言語：C#
フレームワーク：ASP.NET Core
主なライブラリ：Entity Framework Core
- インフラ
Amazon LightsailでWindows サーバーを使用する
後々、変更するかもしれない
- データベース
SQL Server Express
こちらも後で変更するかもしれない
画面構成
1. ログイン画面
ID（社員番号、メールアドレス）
パスワード
将来的に、MicrosoftアカウントやGoogleアカウントでSSOをしたい
2. 一般ユーザー用 ダッシュボード
- 「出勤」、「退勤」の大きなボタン
出勤時、勤務場所の選択（「出社」、「リモート」、「出張」） - 「残業申請」、「有給申請」、「振出振替申請」、「打刻修正申請」のボタン
申請フォームがダイアログ表示する
日付（FromTo）、時刻（FromTo）とコメントを入力可能
振出振替申請の場合、振出日と振替日を入力可能 - 「パスワード変更」ボタン
パスワードを変更するダイアログが表示
入力ミス防止のため、２回入力 - 「管理者モード」のボタン
管理者権限を持つユーザーのみ表示、管理者画面へ遷移する - ステータス表示
勤務状態（出勤、退勤、休暇）、出勤時間、退勤時間、稼働時間
稼働時間は、ユーザー単位に設定してある勤務形態マスタから計算して表示する - 申請一覧
残業申請、有給申請、打刻修正申請の簡易一覧表示
各行に「詳細」ボタンがあり、それぞれの申請情報と申請状態が確認できる詳細画面をダイアログ表示 - 勤務履歴
カレンダーで表示し、それぞれの日にちに出勤時間、退勤時間、もしくは、「休暇」と表示
3. 管理者ユーザー用 従業員管理画面
- 出勤者数、欠勤者数、有給取得者数の各合計数
- アラート一覧
月間の残業時間が基準を超過している従業員のアラート表示 - １か月分の出勤状況一覧
合計勤務時間、合計残業時間、深夜労働時間、出勤時間、退勤時間を表示
各行に「詳細」ボタンで、従業員ごとの詳細画面を開く - 従業員を「追加」、「削除」するボタン
追加は、ID（社員番号、メールアドレス等）とパスワードを入力して、一覧に追加する
削除は、論理削除 - 「申請一覧」ボタン
「残業申請」、「有給申請」、「振出振替申請」、「打刻修正申請」の申請一覧をダイアログ表示
承認、差戻しを選択する
差戻しの場合、コメントも入力可能 - 「CSV出力」、「PDF出力」ボタン
CSVかPDFで帳票を出力する - 「月締め」ボタン
表示している月をロックする（編集不可） - 「勤務形態」ボタン
従業員の勤務形態を一括で変更できる画面をダイアログ表示
4. 管理者ユーザー用 従業員詳細画面
所定労働時間やフレックスタイムなどの勤務形態マスタの設定
役職、権限割り当て
有給休暇、欠勤、遅刻・早退の回数や時間をまとめる
表示しているユーザーの申請一覧
まとめ
今回は、自分が抱える課題を解決するために、フルスタック構成（React × ASP.NET Core × AWS）で勤怠管理システムの全体像を設計しました。
単なる学習用にとどまらず、SlackやLINEとの連携も見据えた、実用性の高いシステムを目指していきたいと思います。
次回は、データベース設計についてアウトプットしていこうと思います。
投稿者プロフィール
