配送・配車管理システム

概要 #個人開発

配送依頼の受付から配送計画、車両・ドライバー割当、運行、到着、Proof of Delivery（POD）までを一つの配送番号で一貫管理するWeb業務システムです。登録不要のローカルDemoで、架空の配送依頼26件、車両8台、ドライバー10名を使用して、実際の配送オペレーション全体を体験できます。

主な機能

配車Board

• 未割当→割当済→配送中→完了の4段階で配送進捗を可視化
• 詳細ステージ（受付、計画、出発、集荷、配送、到着）を統合管理

車両・ドライバー割当

• 配送時間帯、荷物重量・容積、車両上限、点検状態を同時検証
• 容量超過、時間帯重複、点検期限超過などの競合を自動検出
• Blockerが0件のときだけ割当確定を有効化

Route Map

• SVGベースのベクター概念図で集荷地点、配送地点、ルート、現在位置を可視化
• 複数配送先はNearest Neighborアルゴリズムで最適候補を生成
• 結果はDraftで保存し、管理者承認まで自動適用しない

Delivery Timeline

• 受付→割当→出発→集荷→配送→到着→完了の7ステップを実績とともに表示
• 予定時刻と実績の比較で遅延を自動判定

Proof of Delivery（POD）

• 完了時刻、受取人、メモ、写真相当のDemo Placeholderを記録
• POD未記録では通常のステータス遷移で完了できない仕様

Dashboard & Analytics

• 本日配送件数、未割当件数、配送中件数、遅延件数をリアルタイム集計
• 車両・ドライバー稼働率、平均所要時間、遅延率を算出
• 時間帯別チャートで配送パターンを分析

Audit Log

• 割当作成・変更、ステータス変更、Route承認、POD記録を配送番号で追跡
• 業務の透明性と追跡可能性を確保

技術スタック

Next.js 16.3、React 19.2、TypeScript、Tailwind CSS、Lucide React、Sonner、Web Storage API

特徴

• 外部API（Map、GPS、Routing）を使わないスタンドアロン動作
• Apple Design原則に基づいたUI（Side Panel、Press Feedback、44px操作領域）
• Reduced Motion / Contrast対応のアクセシビリティ
• ブラウザのlocalStorageで状態を保持、リセット機能で初期化可能