PORTFOLIO
社内管理システム
勤怠管理・日報管理・在庫管理を統合した社内業務一元管理Webアプリケーション。Next.js 15 App Router + Prisma + NextAuth.jsによるフルスタック構成。ニューモーフィズムデザインで直感的なUI。
Next.js 15
NextAuth.js
Prisma
React
shadcn/ui
SQLite
Tailwind CSS
TypeScript
プロジェクトの背景
勤怠・作業実績・在庫が個別のExcelやスプレッドシートで管理されており、情報の一元的な把握ができないという課題を解決するシステム。社員番号ベースの認証、ワンクリック打刻、在庫アラート通知、CSVインポート/エクスポートなど、中小企業の日常業務に必要な機能を一通り備える。
課題解決プロセス
01
課題
CHALLENGE
勤怠はタイムカード、日報はExcel、在庫は紙台帳と、業務情報が個別に管理されていた。データの横断的な把握ができず、月次集計に毎回1〜2日を要していた。また、全社員の勤怠修正・日報確認・在庫チェックを個別に行う管理者の工数が膨大で、特に在庫の閾値管理は目視確認に依存し発注遅れが発生。利用者は非技術者であり、ワンクリック・最小入力で業務を完結できるUIが求められた。
02
アプローチ
APPROACH
Next.js 15 App RouterでフロントエンドとバックエンドをTypeScriptで統合。React 19 Server Componentsでサーバーサイドデータ取得、Client Componentsでインタラクティブ操作を分離。shadcn/ui + カスタムCSSでニューモーフィズムデザインシステムを構築。入出庫登録時に現在庫と閾値を比較し、閾値以下で管理者に自動通知を生成。Prisma ORM + Zodスキーマでデータ整合性を担保。
03
成果
OUTCOME
勤怠・日報・在庫の3業務を統合し、13画面のフルスタックWebアプリを構築。20以上のAPI Routesを設計・実装。ワンクリック打刻・リアルタイム時計・在庫アラート自動通知で業務効率を大幅に向上。管理者向け一元管理画面で管理工数を削減。CSV入出力で既存Excel運用との共存を実現。
ポイント
- Next.js 15 App Router + RSC: Server ComponentsとClient Componentsを適材適所で使い分け。サーバーサイドデータ取得でTTFBを最適化しつつ、打刻やフォームなどインタラクティブ操作のみクライアントで処理
- ニューモーフィズムデザインシステム: nm-raised / nm-inset / nm-flat の3バリエーションで統一的なUI。ブルー系カラーパレット（#667eea）で柔らかい影と浮き出し効果を実現
- Prisma + Zodによるデータ整合性: 7モデルの型安全なDB操作。ユニーク制約（社員番号・SKU・ユーザー×日付の勤怠）とカスケード削除で一貫性を保証
- 在庫アラート自動通知: 入出庫時に閾値比較→管理者通知を自動生成。ヘッダーバッジで未読数を常時表示し、発注遅れを防止
- SQLite/PostgreSQLデュアル対応: 開発はSQLiteでゼロ設定、本番はSupabase PostgreSQLでスケーラビリティを確保。Prismaアダプタで透過的に切替
プロジェクト概要
勤怠・作業実績・在庫が個別のExcelやスプレッドシートで管理されており、情報の一元的な把握ができないという課題を解決するシステム。社員番号ベースの認証、ワンクリック打刻、在庫アラート通知、CSVインポート/エクスポートなど、中小企業（10〜50名規模）の日常業務に必要な機能を一通り備えるフルスタックWebアプリケーションです。
主要機能
- 勤怠管理: リアルタイム時計表示付きのワンクリック出勤/退勤打刻。月次履歴・勤務時間自動計算
- 日報管理: 日付・作業内容・作業時間の日報作成。月別集計サマリー（件数・合計時間・平均時間）
- 在庫管理: 商品マスタ（SKU・カテゴリ・閾値）、入出庫記録、在庫アラート自動通知
- ダッシュボード: 今日の勤怠状況・在庫アラート・直近日報を一画面に集約
- 通知: 在庫が閾値を下回ると管理者に自動通知。ヘッダーバッジで未読数表示
- CSV入出力: 勤怠・日報・在庫データのCSVエクスポート/インポート（PapaParse）
- 認証・権限管理: NextAuth.js v5 + bcrypt。管理者/一般ユーザーの2段階RBAC
- 管理者機能: 全ユーザーの勤怠閲覧・修正、全日報閲覧、ユーザーCRUD、商品マスタ管理
画面構成（13画面）
一般ユーザー向け（8画面）
- ログイン: ニューモーフィズムデザイン。社員番号 + パスワードでJWTセッション発行
- ダッシュボード: 勤怠状況・在庫アラート・直近日報の3カラム表示。時間帯連動の挨拶メッセージ
- 勤怠管理: リアルタイム時計 + ワンクリック打刻。月別勤怠記録テーブル
- 日報一覧: サマリーカード（件数・合計時間・平均時間） + 月別フィルタ
- 日報作成: 日付ピッカー・作業内容・作業時間（0.5h刻み）入力フォーム
- 在庫一覧: 4指標サマリー + 商品テーブル。閾値以下は赤字警告
- 入出庫登録: 商品選択・入庫/出庫トグル・数量入力。在庫不足時バリデーション
- 通知一覧: システム通知の既読/未読管理
管理者専用（5画面）
- ユーザー管理: 社員番号・氏名・権限・状態でユーザーCRUD。カスケード削除対応
- 勤怠管理: 全社員の勤怠一元管理。月別/社員別フィルタ、打刻時刻の編集機能
- 日報管理: 社員別サマリー可視化。月別/社員別フィルタ、詳細ダイアログ
- 商品マスタ: 商品の追加・編集・無効化・削除。SKUユニーク制約
- CSV管理: 各データのCSVエクスポート/インポート。日本語ヘッダー対応
システム構成
Next.js 15 App Routerでフロントエンド（RSC + Client Components）とバックエンド（API Routes）を1プロジェクトに統合。Middlewareで認証ゲートを実装し、Prisma ORMで7モデルの型安全なDB操作を実現。開発はSQLite、本番はSupabase PostgreSQLのデュアル構成。
Frontend
- Next.js 15（App Router）
- React 19（RSC + Client）
- TypeScript
- Tailwind CSS v4
- shadcn/ui + TanStack Table
Backend
- Next.js API Routes
- Prisma ORM
- NextAuth.js v5（JWT）
- Zod（バリデーション）
- SQLite / PostgreSQL
技術選定の理由
- Next.js 15: App RouterでRSC/Client Componentsを活用。API RoutesでバックエンドもTypeScriptで統一し、フルスタックを1プロジェクトで完結
- Prisma: TypeScript型生成による型安全なDB操作。スキーマファーストでマイグレーションを管理。SQLite/PostgreSQLの切替が容易
- NextAuth.js v5: Credentials Providerで社員番号ログインを実装。JWT + セッション拡張でRBACを実現。Middlewareとの統合が容易
- shadcn/ui: Radix UIベースでアクセシビリティを担保。カスタマイズ性が高くニューモーフィズムとの親和性が良い
- SQLite → PostgreSQL: 開発はSQLiteでゼロ設定。本番はSupabase PostgreSQLでスケーラビリティを確保。Prismaアダプタで透過的に切替