ShipFlow - 受注・出荷ステータス追跡＆梱包指示書メーカー

## 1. アプリの目的・ターゲットユーザー
小規模〜中規模の通販事業者・製造業・卸売業の出荷担当者・物流担当者を対象とした、受注から出荷完了までの一連フローを一元管理するブラウザ完結型の受注・出荷管理アプリ。受注情報の登録から梱包指示書の発行・出荷ステータス管理・日次出荷実績の集計までをシンプルなUIで完結させ、Excelや紙による管理からの脱却を支援する。

---

## 2. 主要機能

- **受注登録・管理**：顧客名・商品名・数量・納期・送付先・備考を入力して受注を登録。受注番号は自動採番（YYMMDDxxxx形式）。一覧はステータス別フィルター（未処理／梱包中／出荷済／キャンセル）とフリーワード検索対応。
- **ステータス進行管理**：受注ごとにワンクリックでステータスを「未処理→梱包中→出荷済」へ進める。進行時刻を自動記録し、ステータス変更履歴をポップアップで確認可能。
- **梱包指示書の自動生成・印刷**：受注データから梱包指示書（A4印刷用レイアウト）をワンクリック生成。出力項目：受注番号・バーコード（Code128をSVGで描画）・顧客情報・商品リスト・梱包注意事項・担当者確認欄。ブラウザの印刷ダイアログを呼び出してそのまま印刷可能。
- **日次出荷実績ダッシュボード**：本日の出荷件数・未処理件数・梱包中件数をカード表示。直近7日間の出荷件数推移を折れ線グラフ（Canvas.js / 素のCanvas）で可視化。
- **CSV出力**：期間・ステータス指定で受注データをCSVダウンロード。Excel連携・帳票作成に活用可能。

---

## 3. 画面構成

### (1) ダッシュボード（トップページ）
- 上部：本日の出荷件数・未処理件数・梱包中件数の3枚サマリーカード
- 中段：直近7日間の出荷件数推移グラフ（Canvasで折れ線描画）
- 下部：「今日出荷予定」一覧（納期=本日）をテーブル表示、行クリックで詳細へ遷移

### (2) 受注一覧ページ
- ステータスタブ（全件／未処理／梱包中／出荷済／キャンセル）
- フリーワード検索（顧客名・商品名・受注番号）
- 受注テーブル：受注番号、顧客名、商品数、納期、ステータスバッジ、梱包指示書ボタン、ステータス進行ボタン
- ページネーション（1ページ20件）
- CSV出力ボタン（期間・ステータス絞り込み対応）

### (3) 受注登録・編集フォーム
- 顧客情報：顧客名、電話、メール、送付先住所（郵便番号→住所自動補完はjPostalデータを内包）
- 商品行：商品名・品番・数量・単位を複数行追加（行追加/削除ボタン）
- 納期・希望時間帯、配送業者（ヤマト/佐川/郵便/その他）、梱包注意事項（テキスト）、担当者名
- 登録後は受注一覧へリダイレクト

### (4) 梱包指示書プレビュー（印刷用）
- 別タブ or モーダルでA4縦レイアウトを表示
- 上部：会社名・受注番号・バーコード（SVG Code128）
- 中段：顧客名・送付先・配送業者・希望時間帯
- 商品テーブル：品番・商品名・数量・単位
- 下部：梱包注意事項・担当者確認チェック欄×3（梱包完了・送り状貼付・検品）
- 印刷ボタン（window.print()）

### (5) 設定ページ
- 自社情報（社名・住所・電話）の登録（梱包指示書のヘッダーに反映）
- ステータス変更時の確認ダイアログON/OFF
- 商品マスタ管理（品番・商品名・単位を事前登録し、受注入力時にサジェスト）

---

## 4. データ構造（MySQLテーブル概要）

```sql
-- 受注ヘッダー
orders (
id INT AUTO_INCREMENT PRIMARY KEY,
order_no VARCHAR(20) UNIQUE, -- 自動採番 YYMMDDxxxx
customer_name VARCHAR(100),
customer_tel VARCHAR(20),
customer_email VARCHAR(100),
shipping_zip VARCHAR(10),
shipping_address TEXT,
delivery_date DATE,
delivery_time VARCHAR(50), -- 例:14〜16時
carrier VARCHAR(50), -- ヤマト/佐川 等
packing_note TEXT,
staff_name VARCHAR(50),
status ENUM('pending','packing','shipped','cancelled') DEFAULT 'pending',
created_at DATETIME,
updated_at DATETIME
);

-- 受注明細
order_items (
id INT AUTO_INCREMENT PRIMARY KEY,
order_id INT,
product_code VARCHAR(50),
product_name VARCHAR(100),
qty INT,
unit VARCHAR(20) -- 個/本/箱 等
);

-- ステータス変更履歴
order_status_logs (
id INT AUTO_INCREMENT PRIMARY KEY,
order_id INT,
from_status VARCHAR(20),
to_status VARCHAR(20),
changed_at DATETIME,
staff_name VARCHAR(50)
);

-- 商品マスタ
products (
id INT AUTO_INCREMENT PRIMARY KEY,
product_code VARCHAR(50),
product_name VARCHAR(100),
unit VARCHAR(20),
created_at DATETIME
);

-- 設定
settings (
key VARCHAR(50) PRIMARY KEY,
value TEXT
);
```

---

## 5. デザインの方向性

- **テーマカラー**：ネイビー (#1A3557) × ホワイト × アクセントオレンジ (#F07800）。物流・業務現場の信頼感・視認性を重視。
- **フォント**：Noto Sans JP（Google Fonts）、本文14px、見出し16〜20px。
- **レイアウト**：左側に縦型サイドナビ（PC）、スマホではハンバーガーメニュー切替。メインコンテンツはmax-width 1200px、カードベースのレスポンシブグリッド。
- **ステータスバッジ**：未処理=グレー、梱包中=オレンジ、出荷済=グリーン、キャンセル=レッドのカラーコーディング。
- **梱包指示書**：印刷時は白背景・黒文字のシンプルな業務用レイアウト。バーコードはSVGでサーバーサイド生成（外部ライブラリ不要）。
- **全体トーン**：飾りを排したミニマル業務UI。誰でも即使いこなせる直感操作を最優先。