From f9377e34561a18791b06bb102464257f6214a2e8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 19 Feb 2026 01:17:38 +0000
Subject: [PATCH 1/4] docs: add comprehensive site documentation implementation
 plan

8-stage plan covering documentation infrastructure, bilingual i18n
(Japanese/English), automated screenshot capture, workflow diagrams,
and cross-reference system for the entire Oroshi wholesale management site.

https://claude.ai/code/session_01BRR9VwvNKS1p7sPJKUt1Rb
---
 ...-02-18-comprehensive-site-documentation.md | 581 ++++++++++++++++++
 1 file changed, 581 insertions(+)
 create mode 100644 docs/plans/2026-02-18-comprehensive-site-documentation.md

diff --git a/docs/plans/2026-02-18-comprehensive-site-documentation.md b/docs/plans/2026-02-18-comprehensive-site-documentation.md
new file mode 100644
index 0000000..6660cb5
--- /dev/null
+++ b/docs/plans/2026-02-18-comprehensive-site-documentation.md
@@ -0,0 +1,581 @@
+# Comprehensive Site Documentation Plan
+
+**Date:** 2026-02-18
+**Branch:** `claude/comprehensive-site-documentation-p9YON`
+**Goal:** Create rich, bilingual (Japanese/English) documentation with screenshots, workflow diagrams, and cross-references covering the entire Oroshi wholesale order management system.
+
+---
+
+## Problem Statement
+
+Oroshi has 13,600+ lines of developer-facing documentation but **zero end-user documentation**. There are:
+- No screenshots of the actual UI
+- No workflow guides for operators
+- No bilingual user guides (existing docs are English-only developer docs)
+- No documentation testing infrastructure
+- No cross-reference system linking features to code
+
+An operator or new team member has no way to learn the system except by using it. This plan creates a comprehensive, tested, easy-to-maintain documentation suite.
+
+---
+
+## Architecture Decisions
+
+### Documentation Format: In-App Guide Pages (Rails Views)
+
+Rather than static markdown files that go stale, documentation will be **live Rails views** served from a `Oroshi::DocumentationController`. This gives us:
+
+- **Bilingual support via i18n** — `t()` helpers for Japanese/English switching
+- **Live screenshots** — System tests capture screenshots that are served as assets
+- **Cross-references** — Link directly to related app pages with `*_path` helpers
+- **Testable** — Controller tests verify pages render; i18n tests verify translations exist
+- **Searchable** — Built-in search across all documentation pages
+- **Maintainable** — When UI changes, screenshot tests fail, prompting updates
+
+### Screenshot Strategy: Automated Capture via System Tests
+
+- System tests using Capybara + headless Chrome capture screenshots during test runs
+- Screenshots stored in `app/assets/images/docs/` organized by feature
+- A rake task `docs:screenshots` runs the screenshot suite and updates images
+- Screenshots are committed to the repo (they change infrequently)
+- When the UI changes, failing screenshot tests signal that docs need updating
+
+### Workflow Diagrams: Mermaid.js
+
+- Rendered client-side using Mermaid.js (already importmap-compatible)
+- Written inline in view templates
+- Bilingual labels via i18n keys
+- No external diagram tools needed
+
+### File Organization
+
+```
+app/
+  controllers/oroshi/
+    documentation_controller.rb          # Serves all doc pages
+  views/oroshi/documentation/
+    index.html.erb                       # Documentation home / table of contents
+    _sidebar.html.erb                    # Navigation sidebar partial
+    _breadcrumbs.html.erb                # Breadcrumb navigation partial
+    getting_started/
+      index.html.erb                     # Getting started overview
+      _first_login.html.erb              # First login walkthrough
+      _navigation.html.erb               # Site navigation guide
+      _onboarding.html.erb               # Onboarding checklist guide
+    orders/
+      index.html.erb                     # Orders overview
+      _creating_orders.html.erb          # 1-2 click order creation
+      _order_templates.html.erb          # Template system
+      _order_lifecycle.html.erb          # Estimate → confirmed → shipped
+      _bundling_orders.html.erb          # Bundling for shared shipping
+      _searching_orders.html.erb         # Search & calendar
+      _dashboard_tabs.html.erb           # 6 dashboard tabs overview
+    supply_chain/
+      index.html.erb                     # Supply chain overview
+      _supply_intake.html.erb            # Daily supply entry
+      _suppliers.html.erb                # Supplier management
+      _supply_types.html.erb             # Supply types & variations
+      _supply_check_sheets.html.erb      # PDF check sheet generation
+    production/
+      index.html.erb                     # Production overview
+      _production_zones.html.erb         # Zone configuration
+      _production_requests.html.erb      # Request workflow
+      _factory_floor.html.erb            # Factory floor schedule views
+    shipping/
+      index.html.erb                     # Shipping overview
+      _shipping_methods.html.erb         # Method configuration
+      _receptacles.html.erb              # Container management
+      _shipping_dashboard.html.erb       # Shipping chart/list/slips
+    financials/
+      index.html.erb                     # Financial overview
+      _revenue_tracking.html.erb         # Revenue dashboard
+      _profit_calculation.html.erb       # How costs → profit works
+      _payment_receipts.html.erb         # Payment receipt workflows
+      _invoices.html.erb                 # Supplier invoice management
+      _materials_costs.html.erb          # Material cost configuration
+    admin/
+      index.html.erb                     # Admin overview
+      _company_setup.html.erb            # Company information
+      _buyer_management.html.erb         # Buyer configuration
+      _product_management.html.erb       # Product & variation setup
+      _user_management.html.erb          # User roles & access
+
+config/locales/
+  documentation.ja.yml                   # All Japanese documentation text
+  documentation.en.yml                   # All English documentation text
+
+test/
+  controllers/oroshi/
+    documentation_controller_test.rb     # Page rendering tests
+  system/oroshi/
+    documentation_screenshots_test.rb    # Screenshot capture tests
+  integration/oroshi/
+    documentation_i18n_test.rb           # Translation completeness tests
+    documentation_links_test.rb          # Cross-reference validation
+
+lib/tasks/
+  docs.rake                             # docs:screenshots, docs:verify tasks
+
+app/assets/images/docs/                  # Auto-captured screenshots
+  getting_started/
+  orders/
+  supply_chain/
+  production/
+  shipping/
+  financials/
+  admin/
+```
+
+---
+
+## Implementation Stages
+
+### Stage 1: Documentation Infrastructure
+
+**Objective:** Build the scaffolding that all documentation pages will use.
+
+**Tasks:**
+
+1. **Create `DocumentationController`**
+   - Actions: `index`, `show` (renders section/page combos)
+   - Authentication: accessible to all logged-in users
+   - Layout: dedicated documentation layout with sidebar + breadcrumbs
+   - Locale switching: respects `I18n.locale` parameter
+
+2. **Add documentation routes**
+   ```ruby
+   # In config/routes.rb (Oroshi::Engine.routes.draw)
+   resources :documentation, only: [:index] do
+     collection do
+       get ':section', action: :section, as: :section
+       get ':section/:page', action: :page, as: :page
+     end
+   end
+   ```
+
+3. **Create documentation layout**
+   - Sidebar with collapsible section navigation
+   - Breadcrumb trail (Documentation > Orders > Creating Orders)
+   - Language toggle (日本語 / English) that preserves current page
+   - Search bar (client-side full-text search via Stimulus)
+   - "Edit this page" link for maintainers
+   - Responsive: works on desktop and tablet
+
+4. **Set up Mermaid.js for workflow diagrams**
+   - Pin via importmap: `bin/importmap pin mermaid`
+   - Create Stimulus controller `documentation-diagram` to initialize Mermaid
+   - Support bilingual labels via data attributes
+
+5. **Create screenshot capture infrastructure**
+   - System test base class `DocumentationScreenshotTest`
+   - Helper methods: `capture_screenshot(name, &block)` — navigates, waits for load, captures
+   - Screenshot naming convention: `docs/{section}/{page_name}.png`
+   - Rake task `docs:screenshots` runs just the screenshot test suite
+   - Screenshots saved to `app/assets/images/docs/`
+
+6. **Create locale file skeleton**
+   - `documentation.ja.yml` with full key structure (Japanese text)
+   - `documentation.en.yml` with full key structure (English text)
+   - Both files have identical key hierarchies
+
+7. **Create documentation test infrastructure**
+   - Controller test: every section/page renders 200
+   - i18n test: every key in `documentation.ja.yml` exists in `documentation.en.yml` and vice versa
+   - Link test: every cross-reference path resolves to a valid route
+   - Screenshot test: every referenced image file exists
+
+**Files created/modified:**
+- `app/controllers/oroshi/documentation_controller.rb` (new)
+- `app/views/oroshi/documentation/index.html.erb` (new)
+- `app/views/oroshi/documentation/_sidebar.html.erb` (new)
+- `app/views/oroshi/documentation/_breadcrumbs.html.erb` (new)
+- `app/views/layouts/oroshi/documentation.html.erb` (new)
+- `app/javascript/controllers/oroshi/documentation_search_controller.js` (new)
+- `app/javascript/controllers/oroshi/documentation_diagram_controller.js` (new)
+- `config/routes.rb` (modified — add documentation routes)
+- `config/locales/documentation.ja.yml` (new)
+- `config/locales/documentation.en.yml` (new)
+- `test/controllers/oroshi/documentation_controller_test.rb` (new)
+- `test/system/oroshi/documentation_screenshots_test.rb` (new)
+- `test/integration/oroshi/documentation_i18n_test.rb` (new)
+- `lib/tasks/docs.rake` (new)
+
+---
+
+### Stage 2: Getting Started & Onboarding Documentation
+
+**Objective:** Guide new users from first login through complete system setup.
+
+**Pages:**
+
+1. **Getting Started Index** — Overview of Oroshi, what it does, who it's for
+2. **First Login** — What you see after logging in, navigation orientation
+   - Screenshot: dashboard home page
+   - Screenshot: navigation bar with labels
+3. **Navigation Guide** — Sidebar sections, date navigation, quick actions
+   - Screenshot: main navigation annotated
+   - Screenshot: date picker / calendar
+4. **Onboarding Checklist** — 13-step setup wizard walkthrough
+   - Screenshot: onboarding checklist dropdown
+   - Screenshot: each onboarding step page
+   - Workflow diagram: onboarding completion flow
+
+**Cross-references:** Links to each admin setup section for detailed configuration
+
+**i18n keys:** ~80 keys (titles, paragraphs, captions, alt text)
+
+---
+
+### Stage 3: Orders Documentation (Core Workflow)
+
+**Objective:** Document the primary workflow — the 1-2 click order system that is the heart of Oroshi.
+
+**Pages:**
+
+1. **Orders Overview** — What orders are, the order lifecycle, dashboard layout
+   - Workflow diagram: Order lifecycle (estimate → confirmed → shipped → paid)
+
+2. **Creating Orders (1-2 Click Flow)** — Step-by-step with screenshots
+   - Screenshot: empty order form
+   - Screenshot: buyer selected → shipping methods filtered
+   - Screenshot: product selected → variations shown
+   - Screenshot: quantities entered → costs auto-calculated
+   - Screenshot: completed order in dashboard
+   - Workflow diagram: Cascading form field dependencies
+   - Cross-reference: Buyer management, Product management, Shipping methods
+
+3. **Order Templates** — How to create, use, and manage templates
+   - Screenshot: template creation toggle
+   - Screenshot: template in dashboard
+   - Screenshot: creating order from template
+   - Cross-reference: Creating Orders
+
+4. **Order Lifecycle** — Status transitions and what triggers them
+   - Workflow diagram: Status state machine
+   - Screenshot: order status indicators
+   - Cross-reference: Production requests, Payment receipts
+
+5. **Bundling Orders** — Combining orders for shared shipping
+   - Screenshot: bundle toggle and order selector
+   - Screenshot: bundled orders in dashboard (shipping cost = ¥0)
+   - Cross-reference: Shipping costs, Revenue tracking
+
+6. **Searching Orders** — Search interface, calendar view, filters
+   - Screenshot: search form
+   - Screenshot: calendar view
+   - Screenshot: search results
+
+7. **Dashboard Tabs** — Overview of all 6 dashboard views
+   - Screenshot: each tab (orders, templates, production, shipping, sales, revenue)
+   - Cross-reference: Production, Shipping, Revenue sections
+
+**i18n keys:** ~150 keys
+
+---
+
+### Stage 4: Supply Chain Documentation
+
+**Objective:** Document supply intake, supplier management, and the supply type hierarchy.
+
+**Pages:**
+
+1. **Supply Chain Overview** — How suppliers → supply types → products connect
+   - Workflow diagram: Supply chain data model
+   - Cross-reference: Product management
+
+2. **Supply Intake** — Daily supply entry workflow
+   - Screenshot: supply date entry page
+   - Screenshot: supply entry form (multi-entry)
+   - Screenshot: supply list for a date
+   - Workflow diagram: Supply intake → inventory → production
+
+3. **Supplier Management** — Organizations, suppliers, reception times
+   - Screenshot: supplier organization list
+   - Screenshot: supplier detail with address
+   - Screenshot: reception time configuration
+   - Cross-reference: Invoice management
+
+4. **Supply Types & Variations** — Categorization hierarchy
+   - Screenshot: supply type list
+   - Screenshot: variation detail with cost info
+   - Workflow diagram: SupplyType → Variation → Supplier mapping
+   - Cross-reference: Product variations (how they link)
+
+5. **Supply Check Sheets** — PDF generation workflow
+   - Screenshot: check sheet generation UI
+   - Screenshot: sample PDF output
+   - Cross-reference: Supply intake
+
+**i18n keys:** ~100 keys
+
+---
+
+### Stage 5: Production & Shipping Documentation
+
+**Objective:** Document how orders become factory floor tasks and shipping logistics.
+
+**Pages:**
+
+1. **Production Overview** — How orders flow to the factory floor
+   - Workflow diagram: Order → ProductionRequest → Fulfillment → Inventory update
+
+2. **Production Zones** — Configuring factory floor areas
+   - Screenshot: production zone list
+   - Screenshot: zone configuration
+   - Cross-reference: Product variations (zone assignment)
+
+3. **Production Requests** — How requests are created and tracked
+   - Screenshot: production request list
+   - Screenshot: fulfillment progress indicators
+   - Workflow diagram: Request lifecycle
+
+4. **Factory Floor Schedule** — The 3 production dashboard views
+   - Screenshot: manufacture date view (3-day window)
+   - Screenshot: shipping date view
+   - Screenshot: sort-by-zone view
+   - Cross-reference: Order dashboard production tab
+
+5. **Shipping Overview** — Shipping configuration and logistics
+   - Screenshot: shipping organization list
+   - Screenshot: shipping method detail (costs, departure times)
+   - Cross-reference: Order creation (shipping method selection)
+
+6. **Receptacles** — Container types and packing calculations
+   - Screenshot: receptacle list with dimensions
+   - Screenshot: per-box estimate calculation
+   - Cross-reference: Order creation (quantity linking)
+
+7. **Shipping Dashboard** — Chart, list, and slip views
+   - Screenshot: shipping chart (grouped by carrier)
+   - Screenshot: shipping list (by recipient)
+   - Screenshot: shipping slips (individual labels)
+   - Cross-reference: Order bundling
+
+**i18n keys:** ~120 keys
+
+---
+
+### Stage 6: Financial Documentation
+
+**Objective:** Document revenue tracking, profit calculation, payments, and invoices.
+
+**Pages:**
+
+1. **Financial Overview** — How money flows through Oroshi
+   - Workflow diagram: Order revenue → Expenses → Profit → Payment receipt
+
+2. **Revenue Tracking** — The revenue dashboard tab
+   - Screenshot: revenue dashboard for a date
+   - Screenshot: per-product revenue breakdown
+   - Screenshot: daily expenses summary
+   - Cross-reference: Order dashboard revenue tab
+
+3. **Profit Calculation** — Detailed cost breakdown explanation
+   - Workflow diagram: All cost components → final profit
+   - Tables showing: shipping cost formula, materials cost formula, revenue formula
+   - Cross-reference: Materials costs, Shipping methods, Buyer commissions
+
+4. **Payment Receipts** — Quick entry and single entry workflows
+   - Screenshot: quick entry page (buyers with outstanding orders)
+   - Screenshot: single entry form
+   - Screenshot: payment receipt detail
+   - Screenshot: adjustment line items
+   - Workflow diagram: Order → PaymentReceipt → Deposit tracking
+   - Cross-reference: Order lifecycle (payment association)
+
+5. **Invoices** — Supplier invoice management
+   - Screenshot: invoice list
+   - Screenshot: invoice creation (date grouping)
+   - Screenshot: invoice PDF (standard and simple layouts)
+   - Screenshot: email sending interface
+   - Cross-reference: Supply dates, Supplier management
+
+6. **Materials & Costs** — Material configuration and cost modeling
+   - Screenshot: material list
+   - Screenshot: material form (per-item, per-box, per-freight, per-supply-unit)
+   - Screenshot: product material cost breakdown
+   - Workflow diagram: Material cost calculation for each billing type
+   - Cross-reference: Product management, Profit calculation
+
+**i18n keys:** ~130 keys
+
+---
+
+### Stage 7: Admin & Setup Documentation
+
+**Objective:** Document system configuration for administrators.
+
+**Pages:**
+
+1. **Admin Overview** — What administrators can configure
+   - Cross-reference: Onboarding checklist (setup wizard)
+
+2. **Company Setup** — Company information, addresses, settings
+   - Screenshot: company info form
+   - Screenshot: address management
+
+3. **Buyer Management** — Creating and configuring buyers
+   - Screenshot: buyer list (color-coded)
+   - Screenshot: buyer form (costs, commission, entity type)
+   - Screenshot: buyer shipping method associations
+   - Cross-reference: Order creation (buyer selection), Revenue tracking
+
+4. **Product Management** — Products, variations, and packaging
+   - Screenshot: product list
+   - Screenshot: product form with material associations
+   - Screenshot: product variation form (packaging, shelf life, dimensions)
+   - Screenshot: product cost breakdown
+   - Workflow diagram: Product → Variations → Materials → Cost
+   - Cross-reference: Order creation, Supply types
+
+5. **User Management** — Roles, access levels, Devise integration
+   - Screenshot: user list
+   - Screenshot: user role configuration
+   - Cross-reference: Getting started
+
+**i18n keys:** ~100 keys
+
+---
+
+### Stage 8: Cross-References, Search, and Polish
+
+**Objective:** Wire everything together with cross-references, search, and final polish.
+
+**Tasks:**
+
+1. **Build cross-reference index**
+   - Each page declares its cross-references in a data structure
+   - Sidebar shows "Related Pages" section
+   - Bottom of each page shows "See Also" links
+   - Helper: `doc_link_to(section, page)` generates proper bilingual links
+
+2. **Implement client-side search**
+   - Stimulus controller indexes all documentation content on page load
+   - Search input in sidebar with instant results
+   - Results link to specific pages with highlighted matches
+   - Search works across both languages
+
+3. **Add contextual help links from main app**
+   - Each major feature page gets a small "?" help icon
+   - Links to the relevant documentation section
+   - Helper: `documentation_help_link(section, page)` in application helper
+
+4. **Print-friendly styles**
+   - CSS `@media print` styles for documentation pages
+   - Clean layout without sidebar/navigation
+   - Screenshots render at appropriate size
+
+5. **Documentation home page**
+   - Visual grid of all sections with icons
+   - Quick links to most common tasks
+   - "What's New" section for recent documentation updates
+
+6. **Final testing pass**
+   - Run all documentation tests (controller, i18n, links, screenshots)
+   - Verify all cross-references resolve
+   - Verify both languages are complete
+   - Verify all screenshots are current
+   - Run `docs:verify` rake task
+
+**Files created/modified:**
+- `app/helpers/oroshi/documentation_helper.rb` (new)
+- `app/javascript/controllers/oroshi/documentation_search_controller.js` (enhanced)
+- `app/assets/stylesheets/oroshi/documentation.css` (new)
+- All documentation view templates (enhanced with cross-references)
+- `lib/tasks/docs.rake` (enhanced with `docs:verify`)
+
+---
+
+## Testing Strategy
+
+### Test Categories
+
+| Test Type | What It Verifies | Run Frequency |
+|-----------|-----------------|---------------|
+| Controller tests | Every page renders 200 in both locales | Every CI run |
+| i18n completeness | Every JA key has EN equivalent and vice versa | Every CI run |
+| Cross-reference validation | Every `doc_link_to` resolves to valid route | Every CI run |
+| Screenshot capture | Screenshots exist for all referenced images | On demand (`docs:screenshots`) |
+| Screenshot freshness | UI changes trigger test failures for affected screenshots | Every CI run (optional) |
+
+### Test Commands
+
+```bash
+# Run all documentation tests
+bin/rails test test/controllers/oroshi/documentation_controller_test.rb \
+               test/integration/oroshi/documentation_i18n_test.rb
+
+# Capture/update screenshots
+bin/rails docs:screenshots
+
+# Verify documentation completeness
+bin/rails docs:verify
+```
+
+---
+
+## Estimated Scope
+
+| Stage | New Files | i18n Keys | Screenshots |
+|-------|-----------|-----------|-------------|
+| 1. Infrastructure | ~14 | ~30 (nav/chrome) | 0 |
+| 2. Getting Started | ~4 | ~80 | ~8 |
+| 3. Orders | ~7 | ~150 | ~16 |
+| 4. Supply Chain | ~5 | ~100 | ~12 |
+| 5. Production & Shipping | ~7 | ~120 | ~14 |
+| 6. Financials | ~6 | ~130 | ~14 |
+| 7. Admin & Setup | ~5 | ~100 | ~10 |
+| 8. Cross-refs & Search | ~3 | ~20 | 0 |
+| **Total** | **~51** | **~730** | **~74** |
+
+---
+
+## Maintenance Plan
+
+### When UI Changes
+1. Run `bin/rails docs:screenshots` — failing screenshots indicate which docs need updates
+2. Update the affected screenshot and any text describing the changed UI
+3. Run `bin/rails docs:verify` to confirm completeness
+
+### When Features Are Added
+1. Add new documentation page(s) in the appropriate section
+2. Add i18n keys in both `documentation.ja.yml` and `documentation.en.yml`
+3. Add cross-references from related pages
+4. Add screenshot capture test
+5. Run full documentation test suite
+
+### When Features Are Removed
+1. Remove the documentation page
+2. Remove associated i18n keys
+3. Remove cross-references (link test will catch orphans)
+4. Remove screenshot capture test and image files
+
+---
+
+## Implementation Order & Dependencies
+
+```
+Stage 1 (Infrastructure) ──── MUST be first, all others depend on it
+    │
+    ├── Stage 2 (Getting Started) ──── Can start immediately after Stage 1
+    │
+    ├── Stage 3 (Orders) ──── Can start immediately after Stage 1
+    │       │                  (highest value — core workflow)
+    │       │
+    │       ├── Stage 5 (Production & Shipping) ──── Depends on Stage 3
+    │       │                                         (references order dashboard)
+    │       │
+    │       └── Stage 6 (Financials) ──── Depends on Stage 3
+    │                                      (references order costs)
+    │
+    ├── Stage 4 (Supply Chain) ──── Can start immediately after Stage 1
+    │
+    ├── Stage 7 (Admin & Setup) ──── Can start immediately after Stage 1
+    │
+    └── Stage 8 (Cross-refs & Search) ──── MUST be last
+                                            (needs all content in place)
+```
+
+Stages 2, 3, 4, and 7 can be developed in parallel after Stage 1 is complete.
+Stages 5 and 6 should follow Stage 3.
+Stage 8 wraps everything up.

From 859d6ee15a6a621f65d4254489cbf618a2243a46 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 19 Feb 2026 02:54:00 +0000
Subject: [PATCH 2/4] feat: add comprehensive in-app documentation system with
 bilingual support

Complete documentation system served as Rails views with:

Infrastructure:
- DocumentationController with section/page routing
- DocumentationHelper with cross-reference, diagram, step, callout helpers
- Dedicated documentation layout with sidebar navigation and search
- Stimulus controllers for search and Mermaid.js diagram rendering
- 441 bilingual i18n keys (JA/EN) with verified symmetry

Content (7 sections, 36 view templates):
- Getting Started: first login, navigation, onboarding wizard
- Orders: 1-2 click creation, templates, lifecycle, bundling, search, dashboard tabs
- Supply Chain: intake, suppliers, supply types, check sheets
- Production: zones, requests, factory floor schedules
- Shipping: methods, receptacles, shipping dashboard
- Financials: revenue tracking, profit calculation, payments, invoices, materials
- Admin: company setup, buyer/product/user management

Quality:
- Controller test covering all pages in both locales
- i18n symmetry test verifying JA/EN key parity
- Japanese quality review (terminology consistency, kanji accuracy)
- English review (grammar, terminology, formula accuracy)
- Cross-references between related documentation pages
- Mermaid workflow diagrams for key processes

https://claude.ai/code/session_01BRR9VwvNKS1p7sPJKUt1Rb
---
 .../oroshi/documentation_controller.rb        |  75 +++
 app/helpers/oroshi/documentation_helper.rb    | 148 +++++
 .../documentation_diagram_controller.js       |  24 +
 .../documentation_search_controller.js        |  43 ++
 app/views/layouts/documentation.html.erb      | 113 ++++
 .../admin/buyer_management.html.erb           |  22 +
 .../admin/company_setup.html.erb              |  21 +
 .../oroshi/documentation/admin/index.html.erb |  17 +
 .../admin/product_management.html.erb         |  27 +
 .../admin/user_management.html.erb            |  26 +
 .../documentation/financials/index.html.erb   |  24 +
 .../financials/invoices.html.erb              |  21 +
 .../financials/materials_costs.html.erb       |  23 +
 .../financials/payment_receipts.html.erb      |  18 +
 .../financials/profit_calculation.html.erb    |  23 +
 .../financials/revenue_tracking.html.erb      |  15 +
 .../getting_started/first_login.html.erb      |  19 +
 .../getting_started/index.html.erb            |  43 ++
 .../getting_started/navigation.html.erb       |  21 +
 .../getting_started/onboarding.html.erb       |  59 ++
 app/views/oroshi/documentation/index.html.erb |  32 ++
 .../orders/bundling_orders.html.erb           |  18 +
 .../orders/creating_orders.html.erb           |  61 ++
 .../orders/dashboard_tabs.html.erb            |  19 +
 .../documentation/orders/index.html.erb       |  32 ++
 .../orders/order_lifecycle.html.erb           |  36 ++
 .../orders/order_templates.html.erb           |  21 +
 .../orders/searching_orders.html.erb          |  19 +
 .../production/factory_floor.html.erb         |  19 +
 .../documentation/production/index.html.erb   |  22 +
 .../production/production_requests.html.erb   |  15 +
 .../production/production_zones.html.erb      |  15 +
 .../documentation/shipping/index.html.erb     |  14 +
 .../shipping/receptacles.html.erb             |  15 +
 .../shipping/shipping_dashboard.html.erb      |  15 +
 .../shipping/shipping_methods.html.erb        |  19 +
 .../documentation/supply_chain/index.html.erb |  22 +
 .../supply_chain/suppliers.html.erb           |  15 +
 .../supply_chain/supply_check_sheets.html.erb |  15 +
 .../supply_chain/supply_intake.html.erb       |  15 +
 .../supply_chain/supply_types.html.erb        |  15 +
 config/locales/documentation.en.yml           | 527 ++++++++++++++++++
 config/locales/documentation.ja.yml           | 527 ++++++++++++++++++
 config/routes.rb                              |   5 +
 .../oroshi/documentation_controller_test.rb   |  75 +++
 test/i18n/documentation_i18n_test.rb          | 122 ++++
 46 files changed, 2492 insertions(+)
 create mode 100644 app/controllers/oroshi/documentation_controller.rb
 create mode 100644 app/helpers/oroshi/documentation_helper.rb
 create mode 100644 app/javascript/controllers/documentation_diagram_controller.js
 create mode 100644 app/javascript/controllers/documentation_search_controller.js
 create mode 100644 app/views/layouts/documentation.html.erb
 create mode 100644 app/views/oroshi/documentation/admin/buyer_management.html.erb
 create mode 100644 app/views/oroshi/documentation/admin/company_setup.html.erb
 create mode 100644 app/views/oroshi/documentation/admin/index.html.erb
 create mode 100644 app/views/oroshi/documentation/admin/product_management.html.erb
 create mode 100644 app/views/oroshi/documentation/admin/user_management.html.erb
 create mode 100644 app/views/oroshi/documentation/financials/index.html.erb
 create mode 100644 app/views/oroshi/documentation/financials/invoices.html.erb
 create mode 100644 app/views/oroshi/documentation/financials/materials_costs.html.erb
 create mode 100644 app/views/oroshi/documentation/financials/payment_receipts.html.erb
 create mode 100644 app/views/oroshi/documentation/financials/profit_calculation.html.erb
 create mode 100644 app/views/oroshi/documentation/financials/revenue_tracking.html.erb
 create mode 100644 app/views/oroshi/documentation/getting_started/first_login.html.erb
 create mode 100644 app/views/oroshi/documentation/getting_started/index.html.erb
 create mode 100644 app/views/oroshi/documentation/getting_started/navigation.html.erb
 create mode 100644 app/views/oroshi/documentation/getting_started/onboarding.html.erb
 create mode 100644 app/views/oroshi/documentation/index.html.erb
 create mode 100644 app/views/oroshi/documentation/orders/bundling_orders.html.erb
 create mode 100644 app/views/oroshi/documentation/orders/creating_orders.html.erb
 create mode 100644 app/views/oroshi/documentation/orders/dashboard_tabs.html.erb
 create mode 100644 app/views/oroshi/documentation/orders/index.html.erb
 create mode 100644 app/views/oroshi/documentation/orders/order_lifecycle.html.erb
 create mode 100644 app/views/oroshi/documentation/orders/order_templates.html.erb
 create mode 100644 app/views/oroshi/documentation/orders/searching_orders.html.erb
 create mode 100644 app/views/oroshi/documentation/production/factory_floor.html.erb
 create mode 100644 app/views/oroshi/documentation/production/index.html.erb
 create mode 100644 app/views/oroshi/documentation/production/production_requests.html.erb
 create mode 100644 app/views/oroshi/documentation/production/production_zones.html.erb
 create mode 100644 app/views/oroshi/documentation/shipping/index.html.erb
 create mode 100644 app/views/oroshi/documentation/shipping/receptacles.html.erb
 create mode 100644 app/views/oroshi/documentation/shipping/shipping_dashboard.html.erb
 create mode 100644 app/views/oroshi/documentation/shipping/shipping_methods.html.erb
 create mode 100644 app/views/oroshi/documentation/supply_chain/index.html.erb
 create mode 100644 app/views/oroshi/documentation/supply_chain/suppliers.html.erb
 create mode 100644 app/views/oroshi/documentation/supply_chain/supply_check_sheets.html.erb
 create mode 100644 app/views/oroshi/documentation/supply_chain/supply_intake.html.erb
 create mode 100644 app/views/oroshi/documentation/supply_chain/supply_types.html.erb
 create mode 100644 config/locales/documentation.en.yml
 create mode 100644 config/locales/documentation.ja.yml
 create mode 100644 test/controllers/oroshi/documentation_controller_test.rb
 create mode 100644 test/i18n/documentation_i18n_test.rb

diff --git a/app/controllers/oroshi/documentation_controller.rb b/app/controllers/oroshi/documentation_controller.rb
new file mode 100644
index 0000000..aeb4aad
--- /dev/null
+++ b/app/controllers/oroshi/documentation_controller.rb
@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+class Oroshi::DocumentationController < Oroshi::ApplicationController
+  layout "documentation"
+
+  skip_before_action :maybe_authenticate_user, raise: false
+  before_action :authenticate_user_for_docs
+  before_action :set_locale
+  before_action :set_navigation
+
+  SECTIONS = {
+    getting_started: %w[first_login navigation onboarding],
+    orders: %w[creating_orders order_templates order_lifecycle bundling_orders searching_orders dashboard_tabs],
+    supply_chain: %w[supply_intake suppliers supply_types supply_check_sheets],
+    production: %w[production_zones production_requests factory_floor],
+    shipping: %w[shipping_methods receptacles shipping_dashboard],
+    financials: %w[revenue_tracking profit_calculation payment_receipts invoices materials_costs],
+    admin: %w[company_setup buyer_management product_management user_management]
+  }.freeze
+
+  ALL_SECTIONS = SECTIONS.keys.map(&:to_s).freeze
+
+  # GET /documentation
+  def index
+  end
+
+  # GET /documentation/:section
+  def section
+    @section = params[:section]
+    return redirect_to documentation_index_path, alert: t("oroshi.documentation.messages.invalid_section") unless ALL_SECTIONS.include?(@section)
+
+    render "oroshi/documentation/#{@section}/index"
+  end
+
+  # GET /documentation/:section/:page
+  def page
+    @section = params[:section]
+    @page = params[:page]
+
+    return redirect_to documentation_index_path, alert: t("oroshi.documentation.messages.invalid_section") unless ALL_SECTIONS.include?(@section)
+
+    pages = SECTIONS[@section.to_sym]
+    return redirect_to documentation_section_path(@section), alert: t("oroshi.documentation.messages.invalid_page") unless pages&.include?(@page)
+
+    render "oroshi/documentation/#{@section}/#{@page}"
+  end
+
+  private
+
+  def authenticate_user_for_docs
+    return unless defined?(Devise)
+    return if respond_to?(:current_user) && current_user.present?
+
+    if respond_to?(:authenticate_user!, true)
+      authenticate_user!
+    else
+      redirect_to root_path, alert: t("common.messages.sign_in_required")
+    end
+  end
+
+  def set_locale
+    if params[:locale].present? && %w[ja en].include?(params[:locale])
+      I18n.locale = params[:locale].to_sym
+      session[:docs_locale] = params[:locale]
+    elsif session[:docs_locale].present?
+      I18n.locale = session[:docs_locale].to_sym
+    end
+  end
+
+  def set_navigation
+    @sections = SECTIONS
+    @current_section = params[:section]
+    @current_page = params[:page]
+  end
+end
diff --git a/app/helpers/oroshi/documentation_helper.rb b/app/helpers/oroshi/documentation_helper.rb
new file mode 100644
index 0000000..c42bb18
--- /dev/null
+++ b/app/helpers/oroshi/documentation_helper.rb
@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+module Oroshi
+  module DocumentationHelper
+    # Generate a link to a documentation page with bilingual support
+    def doc_link_to(section, page = nil, options = {})
+      label = if page
+                t("oroshi.documentation.pages.#{section}.#{page}")
+              else
+                t("oroshi.documentation.sections.#{section}")
+              end
+
+      path = if page
+               documentation_page_path(section: section, page: page, locale: I18n.locale)
+             else
+               documentation_section_path(section: section, locale: I18n.locale)
+             end
+
+      css_class = options[:class] || "doc-link"
+      link_to label, path, class: css_class
+    end
+
+    # Generate a "See Also" cross-reference list
+    def doc_see_also(*references)
+      content_tag :div, class: "doc-see-also mt-4 p-3 bg-light rounded" do
+        concat content_tag(:h6, t("oroshi.documentation.chrome.see_also"), class: "text-muted mb-2")
+        concat content_tag(:ul, class: "list-unstyled mb-0") {
+          references.each do |ref|
+            section, page = ref.to_s.split("/")
+            concat content_tag(:li, class: "mb-1") {
+              concat icon("arrow-right-short", class: "text-primary me-1")
+              concat doc_link_to(section, page)
+            }
+          end
+        }
+      end
+    end
+
+    # Contextual help icon that links from main app to documentation
+    def documentation_help_link(section, page = nil)
+      path = if page
+               documentation_page_path(section: section, page: page, locale: I18n.locale)
+             else
+               documentation_section_path(section: section, locale: I18n.locale)
+             end
+
+      link_to path, class: "doc-help-link text-muted", target: "_blank",
+              data: { tippy_content: t("oroshi.documentation.chrome.help_tooltip") } do
+        icon("question-circle")
+      end
+    end
+
+    # Generate breadcrumb items for the current documentation page
+    def doc_breadcrumbs
+      crumbs = [
+        { label: t("oroshi.documentation.chrome.home"), path: documentation_index_path(locale: I18n.locale) }
+      ]
+
+      if @current_section.present?
+        crumbs << {
+          label: t("oroshi.documentation.sections.#{@current_section}"),
+          path: documentation_section_path(section: @current_section, locale: I18n.locale)
+        }
+      end
+
+      if @current_page.present?
+        crumbs << {
+          label: t("oroshi.documentation.pages.#{@current_section}.#{@current_page}"),
+          path: nil
+        }
+      end
+
+      crumbs
+    end
+
+    # Render a screenshot image with proper alt text and caption
+    def doc_screenshot(name, caption_key = nil)
+      alt = caption_key ? t(caption_key) : name.humanize
+      image_path = "docs/#{name}.png"
+
+      content_tag :figure, class: "doc-screenshot my-3" do
+        concat image_tag(image_path, alt: alt, class: "img-fluid rounded shadow-sm border", loading: "lazy")
+        if caption_key
+          concat content_tag(:figcaption, t(caption_key), class: "text-muted small mt-1 text-center")
+        end
+      end
+    end
+
+    # Render a Mermaid workflow diagram
+    def doc_diagram(diagram_content)
+      content_tag :div, class: "doc-diagram my-3", data: {
+        controller: "documentation-diagram",
+        documentation_diagram_definition_value: diagram_content
+      } do
+        content_tag :div, "", class: "mermaid"
+      end
+    end
+
+    # Render a step-by-step workflow guide
+    def doc_steps(&block)
+      content_tag :div, class: "doc-steps", &block
+    end
+
+    def doc_step(number, title_key, &block)
+      content_tag :div, class: "doc-step d-flex mb-3" do
+        concat content_tag(:div, number, class: "doc-step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 me-3")
+        concat content_tag(:div, class: "doc-step-content") {
+          concat content_tag(:h6, t(title_key), class: "mb-1")
+          concat capture(&block) if block
+        }
+      end
+    end
+
+    # Render a key concept callout box
+    def doc_callout(type = :info, &block)
+      icons = { info: "info-circle-fill", tip: "lightbulb-fill", warning: "exclamation-triangle-fill", important: "exclamation-circle-fill" }
+      colors = { info: "primary", tip: "success", warning: "warning", important: "danger" }
+
+      content_tag :div, class: "doc-callout alert alert-#{colors[type]} d-flex align-items-start my-3" do
+        concat content_tag(:div, icon(icons[type], size: 18), class: "me-2 flex-shrink-0 mt-1")
+        concat content_tag(:div, class: "flex-grow-1", &block)
+      end
+    end
+
+    # Bootstrap icon name for each documentation section
+    def section_icon(section_key)
+      {
+        getting_started: "rocket-takeoff",
+        orders: "cart-check",
+        supply_chain: "box-seam",
+        production: "gear-wide-connected",
+        shipping: "truck",
+        financials: "graph-up-arrow",
+        admin: "sliders"
+      }[section_key.to_sym] || "file-text"
+    end
+
+    # Language toggle preserving current page
+    def doc_locale_toggle
+      current_path = request.path
+      other_locale = I18n.locale == :ja ? :en : :ja
+      label = I18n.locale == :ja ? "English" : "日本語"
+      flag = I18n.locale == :ja ? "🇬🇧" : "🇯🇵"
+
+      link_to "#{flag} #{label}", url_for(locale: other_locale), class: "btn btn-sm btn-outline-secondary"
+    end
+  end
+end
diff --git a/app/javascript/controllers/documentation_diagram_controller.js b/app/javascript/controllers/documentation_diagram_controller.js
new file mode 100644
index 0000000..41523ef
--- /dev/null
+++ b/app/javascript/controllers/documentation_diagram_controller.js
@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { definition: String }
+
+  async connect() {
+    try {
+      const { default: mermaid } = await import("https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs")
+      mermaid.initialize({ startOnLoad: false, theme: "default" })
+
+      const container = this.element.querySelector(".mermaid")
+      if (container && this.definitionValue) {
+        const { svg } = await mermaid.render(`mermaid-${Math.random().toString(36).slice(2)}`, this.definitionValue)
+        container.innerHTML = svg
+      }
+    } catch (error) {
+      console.warn("Mermaid diagram rendering failed:", error)
+      const container = this.element.querySelector(".mermaid")
+      if (container) {
+        container.innerHTML = `<pre class="bg-light p-3 rounded"><code>${this.definitionValue}</code></pre>`
+      }
+    }
+  }
+}
diff --git a/app/javascript/controllers/documentation_search_controller.js b/app/javascript/controllers/documentation_search_controller.js
new file mode 100644
index 0000000..f1ab531
--- /dev/null
+++ b/app/javascript/controllers/documentation_search_controller.js
@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "results"]
+
+  connect() {
+    this.buildIndex()
+  }
+
+  buildIndex() {
+    this.entries = []
+    document.querySelectorAll(".doc-sidebar .nav-link").forEach(link => {
+      this.entries.push({
+        text: link.textContent.trim().toLowerCase(),
+        label: link.textContent.trim(),
+        href: link.href
+      })
+    })
+  }
+
+  search() {
+    const query = this.inputTarget.value.trim().toLowerCase()
+
+    if (query.length < 2) {
+      this.resultsTarget.style.display = "none"
+      this.resultsTarget.innerHTML = ""
+      return
+    }
+
+    const matches = this.entries.filter(entry => entry.text.includes(query))
+
+    if (matches.length === 0) {
+      this.resultsTarget.style.display = "block"
+      this.resultsTarget.innerHTML = '<div class="p-2 text-muted small">No results</div>'
+      return
+    }
+
+    this.resultsTarget.style.display = "block"
+    this.resultsTarget.innerHTML = matches.map(match =>
+      `<a href="${match.href}" class="d-block p-2 text-decoration-none border-bottom small">${match.label}</a>`
+    ).join("")
+  }
+}
diff --git a/app/views/layouts/documentation.html.erb b/app/views/layouts/documentation.html.erb
new file mode 100644
index 0000000..50e5852
--- /dev/null
+++ b/app/views/layouts/documentation.html.erb
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>" class="h-100">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%= content_for(:title) || t('oroshi.documentation.chrome.title') %></title>
+
+  <%= capybara_lockstep if defined?(Capybara::Lockstep) %>
+
+  <%= action_cable_meta_tag %>
+  <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
+
+  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+  <%= javascript_importmap_tags %>
+
+  <style>
+    .doc-sidebar { width: 280px; min-height: calc(100vh - 56px); border-right: 1px solid #dee2e6; background: #f8f9fa; }
+    .doc-sidebar .nav-link { padding: 0.35rem 1rem; font-size: 0.9rem; color: #495057; border-radius: 0; }
+    .doc-sidebar .nav-link:hover { background: #e9ecef; color: #212529; }
+    .doc-sidebar .nav-link.active { background: #0d6efd; color: #fff; font-weight: 500; }
+    .doc-sidebar .nav-section { font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; padding: 0.75rem 1rem 0.25rem; margin-top: 0.5rem; }
+    .doc-sidebar .nav-section:first-child { margin-top: 0; }
+    .doc-content { max-width: 860px; }
+    .doc-content h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; }
+    .doc-content h2 { font-size: 1.35rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; padding-bottom: 0.35rem; border-bottom: 1px solid #dee2e6; }
+    .doc-content h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
+    .doc-screenshot { max-width: 100%; }
+    .doc-screenshot img { max-width: 100%; }
+    .doc-step-number { width: 32px; height: 32px; font-size: 0.85rem; font-weight: 700; }
+    .doc-callout { border-left: 4px solid; }
+    .doc-see-also { border-left: 3px solid #0d6efd; }
+    .doc-search-input { border: 1px solid #ced4da; border-radius: 0.375rem; }
+    .doc-search-results { max-height: 300px; overflow-y: auto; }
+    .breadcrumb { font-size: 0.85rem; }
+    @media (max-width: 991.98px) {
+      .doc-sidebar { width: 100%; min-height: auto; border-right: none; border-bottom: 1px solid #dee2e6; }
+    }
+    @media print {
+      .doc-sidebar, .doc-locale-toggle, nav#top_nav, footer { display: none !important; }
+      .doc-content { max-width: 100%; padding: 0; }
+    }
+  </style>
+
+  <%= yield :head %>
+</head>
+<body class="d-flex flex-column h-100">
+  <%= render partial: "layouts/shared/navbar" %>
+
+  <div class="d-flex flex-column flex-lg-row flex-grow-1">
+    <%# Sidebar Navigation %>
+    <aside class="doc-sidebar p-3" data-controller="documentation-search">
+      <div class="mb-3">
+        <%= doc_locale_toggle %>
+      </div>
+
+      <div class="mb-3">
+        <input type="text"
+               class="form-control form-control-sm doc-search-input"
+               placeholder="<%= t('oroshi.documentation.chrome.search_placeholder') %>"
+               data-documentation-search-target="input"
+               data-action="input->documentation-search#search">
+        <div class="doc-search-results mt-1" data-documentation-search-target="results" style="display:none;"></div>
+      </div>
+
+      <nav>
+        <div class="nav-section"><%= t('oroshi.documentation.chrome.home') %></div>
+        <%= link_to t('oroshi.documentation.chrome.overview'),
+              documentation_index_path(locale: I18n.locale),
+              class: "nav-link #{'active' if @current_section.blank?}" %>
+
+        <% @sections.each do |section_key, pages| %>
+          <div class="nav-section"><%= t("oroshi.documentation.sections.#{section_key}") %></div>
+          <%= link_to t("oroshi.documentation.sections.#{section_key}"),
+                documentation_section_path(section: section_key, locale: I18n.locale),
+                class: "nav-link fw-semibold #{'active' if @current_section == section_key.to_s && @current_page.blank?}" %>
+          <% pages.each do |page_name| %>
+            <%= link_to t("oroshi.documentation.pages.#{section_key}.#{page_name}"),
+                  documentation_page_path(section: section_key, page: page_name, locale: I18n.locale),
+                  class: "nav-link ps-4 #{'active' if @current_section == section_key.to_s && @current_page == page_name}" %>
+          <% end %>
+        <% end %>
+      </nav>
+    </aside>
+
+    <%# Main Content %>
+    <main class="flex-grow-1 p-4">
+      <%# Breadcrumbs %>
+      <nav aria-label="breadcrumb" class="mb-3">
+        <ol class="breadcrumb">
+          <% doc_breadcrumbs.each_with_index do |crumb, i| %>
+            <% if crumb[:path] && i < doc_breadcrumbs.length - 1 %>
+              <li class="breadcrumb-item"><%= link_to crumb[:label], crumb[:path] %></li>
+            <% else %>
+              <li class="breadcrumb-item active"><%= crumb[:label] %></li>
+            <% end %>
+          <% end %>
+        </ol>
+      </nav>
+
+      <div class="doc-content">
+        <%= yield %>
+      </div>
+    </main>
+  </div>
+
+  <%= render "layouts/shared/footer" %>
+</body>
+</html>
diff --git a/app/views/oroshi/documentation/admin/buyer_management.html.erb b/app/views/oroshi/documentation/admin/buyer_management.html.erb
new file mode 100644
index 0000000..d0d731a
--- /dev/null
+++ b/app/views/oroshi/documentation/admin/buyer_management.html.erb
@@ -0,0 +1,22 @@
+<% title t('oroshi.documentation.admin.buyer_management.title') %>
+
+<h1><%= t('oroshi.documentation.admin.buyer_management.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.admin.buyer_management.intro') %></p>
+
+<h2><%= t('oroshi.documentation.admin.buyer_management.creating_buyers') %></h2>
+<p><%= t('oroshi.documentation.admin.buyer_management.creating_buyers_body') %></p>
+
+<h2><%= t('oroshi.documentation.admin.buyer_management.cost_settings') %></h2>
+<ul>
+  <li><strong><%= t('oroshi.documentation.admin.buyer_management.handling_cost') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.admin.buyer_management.optional_cost') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.admin.buyer_management.commission') %></strong></li>
+</ul>
+
+<h2><%= t('oroshi.documentation.admin.buyer_management.shipping_association') %></h2>
+<p><%= t('oroshi.documentation.admin.buyer_management.shipping_association_body') %></p>
+
+<h2><%= t('oroshi.documentation.admin.buyer_management.color_coding') %></h2>
+<p><%= t('oroshi.documentation.admin.buyer_management.color_coding_body') %></p>
+
+<%= doc_see_also("orders/creating_orders", "financials/profit_calculation", "shipping/shipping_methods") %>
diff --git a/app/views/oroshi/documentation/admin/company_setup.html.erb b/app/views/oroshi/documentation/admin/company_setup.html.erb
new file mode 100644
index 0000000..f7733a5
--- /dev/null
+++ b/app/views/oroshi/documentation/admin/company_setup.html.erb
@@ -0,0 +1,21 @@
+<% title t('oroshi.documentation.admin.company_setup.title') %>
+
+<h1><%= t('oroshi.documentation.admin.company_setup.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.admin.company_setup.intro') %></p>
+
+<h2><%= t('oroshi.documentation.admin.company_setup.fields') %></h2>
+<ul>
+  <li><%= t('oroshi.documentation.admin.company_setup.field_name') %></li>
+  <li><%= t('oroshi.documentation.admin.company_setup.field_postal') %></li>
+  <li><%= t('oroshi.documentation.admin.company_setup.field_address') %></li>
+  <li><%= t('oroshi.documentation.admin.company_setup.field_phone') %></li>
+  <li><%= t('oroshi.documentation.admin.company_setup.field_fax') %></li>
+  <li><%= t('oroshi.documentation.admin.company_setup.field_email') %></li>
+  <li><%= t('oroshi.documentation.admin.company_setup.field_web') %></li>
+  <li><%= t('oroshi.documentation.admin.company_setup.field_invoice') %></li>
+</ul>
+
+<h2><%= t('oroshi.documentation.admin.company_setup.saving') %></h2>
+<p><%= t('oroshi.documentation.admin.company_setup.saving_body') %></p>
+
+<%= doc_see_also("getting_started/onboarding", "financials/invoices") %>
diff --git a/app/views/oroshi/documentation/admin/index.html.erb b/app/views/oroshi/documentation/admin/index.html.erb
new file mode 100644
index 0000000..38256e9
--- /dev/null
+++ b/app/views/oroshi/documentation/admin/index.html.erb
@@ -0,0 +1,17 @@
+<% title t('oroshi.documentation.admin.index.title') %>
+
+<h1><%= t('oroshi.documentation.admin.index.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.admin.index.intro') %></p>
+
+<h2><%= t('oroshi.documentation.admin.index.overview') %></h2>
+<p><%= t('oroshi.documentation.admin.index.overview_body') %></p>
+
+<h2><%= t('oroshi.documentation.admin.index.settings_list') %></h2>
+<ul>
+  <li><%= t('oroshi.documentation.admin.index.setting_company') %></li>
+  <li><%= t('oroshi.documentation.admin.index.setting_buyers') %></li>
+  <li><%= t('oroshi.documentation.admin.index.setting_products') %></li>
+  <li><%= t('oroshi.documentation.admin.index.setting_users') %></li>
+</ul>
+
+<%= doc_see_also("getting_started/onboarding", "admin/company_setup", "admin/buyer_management", "admin/product_management") %>
diff --git a/app/views/oroshi/documentation/admin/product_management.html.erb b/app/views/oroshi/documentation/admin/product_management.html.erb
new file mode 100644
index 0000000..bf566e6
--- /dev/null
+++ b/app/views/oroshi/documentation/admin/product_management.html.erb
@@ -0,0 +1,27 @@
+<% title t('oroshi.documentation.admin.product_management.title') %>
+
+<h1><%= t('oroshi.documentation.admin.product_management.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.admin.product_management.intro') %></p>
+
+<h2><%= t('oroshi.documentation.admin.product_management.product_hierarchy') %></h2>
+<p><%= t('oroshi.documentation.admin.product_management.product_hierarchy_body') %></p>
+
+<%= doc_diagram("graph TD
+  A[Product] --> B[Variation 1]
+  A --> C[Variation 2]
+  A --> D[Variation 3]
+  A --> E[Materials]") %>
+
+<h2><%= t('oroshi.documentation.admin.product_management.creating_products') %></h2>
+<p><%= t('oroshi.documentation.admin.product_management.creating_products_body') %></p>
+
+<h2><%= t('oroshi.documentation.admin.product_management.variations') %></h2>
+<p><%= t('oroshi.documentation.admin.product_management.variations_body') %></p>
+
+<h2><%= t('oroshi.documentation.admin.product_management.material_costs') %></h2>
+<p><%= t('oroshi.documentation.admin.product_management.material_costs_body') %></p>
+
+<h2><%= t('oroshi.documentation.admin.product_management.positioning') %></h2>
+<p><%= t('oroshi.documentation.admin.product_management.positioning_body') %></p>
+
+<%= doc_see_also("financials/materials_costs", "orders/creating_orders", "supply_chain/supply_types") %>
diff --git a/app/views/oroshi/documentation/admin/user_management.html.erb b/app/views/oroshi/documentation/admin/user_management.html.erb
new file mode 100644
index 0000000..9a28962
--- /dev/null
+++ b/app/views/oroshi/documentation/admin/user_management.html.erb
@@ -0,0 +1,26 @@
+<% title t('oroshi.documentation.admin.user_management.title') %>
+
+<h1><%= t('oroshi.documentation.admin.user_management.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.admin.user_management.intro') %></p>
+
+<h2><%= t('oroshi.documentation.admin.user_management.roles') %></h2>
+<div class="table-responsive">
+  <table class="table table-sm table-bordered">
+    <tbody>
+      <% %w[admin vip employee supplier user].each do |role| %>
+        <tr>
+          <td class="fw-semibold bg-light" style="width: 20%;"><%= role.capitalize %></td>
+          <td><%= t("oroshi.documentation.admin.user_management.role_#{role}") %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<h2><%= t('oroshi.documentation.admin.user_management.approval') %></h2>
+<p><%= t('oroshi.documentation.admin.user_management.approval_body') %></p>
+
+<h2><%= t('oroshi.documentation.admin.user_management.profile') %></h2>
+<p><%= t('oroshi.documentation.admin.user_management.profile_body') %></p>
+
+<%= doc_see_also("getting_started/first_login") %>
diff --git a/app/views/oroshi/documentation/financials/index.html.erb b/app/views/oroshi/documentation/financials/index.html.erb
new file mode 100644
index 0000000..2545348
--- /dev/null
+++ b/app/views/oroshi/documentation/financials/index.html.erb
@@ -0,0 +1,24 @@
+<% title t('oroshi.documentation.financials.index.title') %>
+
+<h1><%= t('oroshi.documentation.financials.index.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.financials.index.intro') %></p>
+
+<h2><%= t('oroshi.documentation.financials.index.overview') %></h2>
+<p><%= t('oroshi.documentation.financials.index.overview_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.index.money_flow') %></h2>
+
+<%= doc_diagram("graph TD
+  A[Revenue] --> E[Profit]
+  B[Expenses] --> E
+  C[Commission] --> E
+  D[Adjustments] --> E") %>
+
+<ul>
+  <li><%= t('oroshi.documentation.financials.index.flow_revenue') %></li>
+  <li><%= t('oroshi.documentation.financials.index.flow_expenses') %></li>
+  <li><%= t('oroshi.documentation.financials.index.flow_commission') %></li>
+  <li><%= t('oroshi.documentation.financials.index.flow_profit') %></li>
+</ul>
+
+<%= doc_see_also("financials/revenue_tracking", "financials/profit_calculation", "financials/payment_receipts", "financials/invoices") %>
diff --git a/app/views/oroshi/documentation/financials/invoices.html.erb b/app/views/oroshi/documentation/financials/invoices.html.erb
new file mode 100644
index 0000000..0aafd2f
--- /dev/null
+++ b/app/views/oroshi/documentation/financials/invoices.html.erb
@@ -0,0 +1,21 @@
+<% title t('oroshi.documentation.financials.invoices.title') %>
+
+<h1><%= t('oroshi.documentation.financials.invoices.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.financials.invoices.intro') %></p>
+
+<h2><%= t('oroshi.documentation.financials.invoices.creating') %></h2>
+<p><%= t('oroshi.documentation.financials.invoices.creating_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.invoices.layouts') %></h2>
+<ul>
+  <li><strong><%= t('oroshi.documentation.financials.invoices.layout_standard') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.financials.invoices.layout_simple') %></strong></li>
+</ul>
+
+<h2><%= t('oroshi.documentation.financials.invoices.sending') %></h2>
+<p><%= t('oroshi.documentation.financials.invoices.sending_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.invoices.tracking') %></h2>
+<p><%= t('oroshi.documentation.financials.invoices.tracking_body') %></p>
+
+<%= doc_see_also("supply_chain/supply_intake", "supply_chain/suppliers") %>
diff --git a/app/views/oroshi/documentation/financials/materials_costs.html.erb b/app/views/oroshi/documentation/financials/materials_costs.html.erb
new file mode 100644
index 0000000..cbbe8f6
--- /dev/null
+++ b/app/views/oroshi/documentation/financials/materials_costs.html.erb
@@ -0,0 +1,23 @@
+<% title t('oroshi.documentation.financials.materials_costs.title') %>
+
+<h1><%= t('oroshi.documentation.financials.materials_costs.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.financials.materials_costs.intro') %></p>
+
+<h2><%= t('oroshi.documentation.financials.materials_costs.what_are_materials') %></h2>
+<p><%= t('oroshi.documentation.financials.materials_costs.what_are_materials_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.materials_costs.billing_types') %></h2>
+<ul>
+  <li><strong><%= t('oroshi.documentation.financials.materials_costs.type_per_item') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.financials.materials_costs.type_per_box') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.financials.materials_costs.type_per_freight') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.financials.materials_costs.type_per_supply') %></strong></li>
+</ul>
+
+<h2><%= t('oroshi.documentation.financials.materials_costs.categories') %></h2>
+<p><%= t('oroshi.documentation.financials.materials_costs.categories_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.materials_costs.product_association') %></h2>
+<p><%= t('oroshi.documentation.financials.materials_costs.product_association_body') %></p>
+
+<%= doc_see_also("financials/profit_calculation", "admin/product_management") %>
diff --git a/app/views/oroshi/documentation/financials/payment_receipts.html.erb b/app/views/oroshi/documentation/financials/payment_receipts.html.erb
new file mode 100644
index 0000000..208cb0a
--- /dev/null
+++ b/app/views/oroshi/documentation/financials/payment_receipts.html.erb
@@ -0,0 +1,18 @@
+<% title t('oroshi.documentation.financials.payment_receipts.title') %>
+
+<h1><%= t('oroshi.documentation.financials.payment_receipts.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.financials.payment_receipts.intro') %></p>
+
+<h2><%= t('oroshi.documentation.financials.payment_receipts.quick_entry') %></h2>
+<p><%= t('oroshi.documentation.financials.payment_receipts.quick_entry_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.payment_receipts.single_entry') %></h2>
+<p><%= t('oroshi.documentation.financials.payment_receipts.single_entry_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.payment_receipts.adjustments') %></h2>
+<p><%= t('oroshi.documentation.financials.payment_receipts.adjustments_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.payment_receipts.search') %></h2>
+<p><%= t('oroshi.documentation.financials.payment_receipts.search_body') %></p>
+
+<%= doc_see_also("financials/profit_calculation", "orders/order_lifecycle") %>
diff --git a/app/views/oroshi/documentation/financials/profit_calculation.html.erb b/app/views/oroshi/documentation/financials/profit_calculation.html.erb
new file mode 100644
index 0000000..6feaf83
--- /dev/null
+++ b/app/views/oroshi/documentation/financials/profit_calculation.html.erb
@@ -0,0 +1,23 @@
+<% title t('oroshi.documentation.financials.profit_calculation.title') %>
+
+<h1><%= t('oroshi.documentation.financials.profit_calculation.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.financials.profit_calculation.intro') %></p>
+
+<h2><%= t('oroshi.documentation.financials.profit_calculation.formula') %></h2>
+<div class="alert alert-light border">
+  <code class="fs-6"><%= t('oroshi.documentation.financials.profit_calculation.formula_body') %></code>
+</div>
+
+<h2><%= t('oroshi.documentation.financials.profit_calculation.revenue_detail') %></h2>
+<p><%= t('oroshi.documentation.financials.profit_calculation.revenue_detail_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.profit_calculation.shipping_detail') %></h2>
+<p><%= t('oroshi.documentation.financials.profit_calculation.shipping_detail_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.profit_calculation.materials_detail') %></h2>
+<p><%= t('oroshi.documentation.financials.profit_calculation.materials_detail_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.profit_calculation.adjustments') %></h2>
+<p><%= t('oroshi.documentation.financials.profit_calculation.adjustments_body') %></p>
+
+<%= doc_see_also("financials/revenue_tracking", "financials/materials_costs", "shipping/shipping_methods", "orders/creating_orders") %>
diff --git a/app/views/oroshi/documentation/financials/revenue_tracking.html.erb b/app/views/oroshi/documentation/financials/revenue_tracking.html.erb
new file mode 100644
index 0000000..e7a9c96
--- /dev/null
+++ b/app/views/oroshi/documentation/financials/revenue_tracking.html.erb
@@ -0,0 +1,15 @@
+<% title t('oroshi.documentation.financials.revenue_tracking.title') %>
+
+<h1><%= t('oroshi.documentation.financials.revenue_tracking.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.financials.revenue_tracking.intro') %></p>
+
+<h2><%= t('oroshi.documentation.financials.revenue_tracking.dashboard') %></h2>
+<p><%= t('oroshi.documentation.financials.revenue_tracking.dashboard_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.revenue_tracking.per_buyer') %></h2>
+<p><%= t('oroshi.documentation.financials.revenue_tracking.per_buyer_body') %></p>
+
+<h2><%= t('oroshi.documentation.financials.revenue_tracking.daily_summary') %></h2>
+<p><%= t('oroshi.documentation.financials.revenue_tracking.daily_summary_body') %></p>
+
+<%= doc_see_also("financials/profit_calculation", "orders/dashboard_tabs", "admin/buyer_management") %>
diff --git a/app/views/oroshi/documentation/getting_started/first_login.html.erb b/app/views/oroshi/documentation/getting_started/first_login.html.erb
new file mode 100644
index 0000000..e09248b
--- /dev/null
+++ b/app/views/oroshi/documentation/getting_started/first_login.html.erb
@@ -0,0 +1,19 @@
+<% title t('oroshi.documentation.getting_started.first_login.title') %>
+
+<h1><%= t('oroshi.documentation.getting_started.first_login.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.getting_started.first_login.intro') %></p>
+
+<h2><%= t('oroshi.documentation.getting_started.first_login.dashboard_overview') %></h2>
+<p><%= t('oroshi.documentation.getting_started.first_login.dashboard_overview_body') %></p>
+
+<h2><%= t('oroshi.documentation.getting_started.first_login.main_areas') %></h2>
+<ul>
+  <li><strong><%= t('oroshi.documentation.getting_started.first_login.area_navbar') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.getting_started.first_login.area_tabs') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.getting_started.first_login.area_content') %></strong></li>
+</ul>
+
+<h2><%= t('oroshi.documentation.getting_started.first_login.next_steps') %></h2>
+<p><%= t('oroshi.documentation.getting_started.first_login.next_steps_body') %></p>
+
+<%= doc_see_also("getting_started/navigation", "getting_started/onboarding") %>
diff --git a/app/views/oroshi/documentation/getting_started/index.html.erb b/app/views/oroshi/documentation/getting_started/index.html.erb
new file mode 100644
index 0000000..419223b
--- /dev/null
+++ b/app/views/oroshi/documentation/getting_started/index.html.erb
@@ -0,0 +1,43 @@
+<% title t('oroshi.documentation.getting_started.index.title') %>
+
+<h1><%= t('oroshi.documentation.getting_started.index.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.getting_started.index.intro') %></p>
+
+<h2><%= t('oroshi.documentation.getting_started.index.what_is_oroshi') %></h2>
+<p><%= t('oroshi.documentation.getting_started.index.what_is_oroshi_body') %></p>
+
+<h2><%= t('oroshi.documentation.getting_started.index.key_features') %></h2>
+<ul>
+  <li><%= t('oroshi.documentation.getting_started.index.feature_orders') %></li>
+  <li><%= t('oroshi.documentation.getting_started.index.feature_supply') %></li>
+  <li><%= t('oroshi.documentation.getting_started.index.feature_production') %></li>
+  <li><%= t('oroshi.documentation.getting_started.index.feature_shipping') %></li>
+  <li><%= t('oroshi.documentation.getting_started.index.feature_financials') %></li>
+  <li><%= t('oroshi.documentation.getting_started.index.feature_admin') %></li>
+</ul>
+
+<h2><%= t('oroshi.documentation.getting_started.index.quick_start') %></h2>
+<p><%= t('oroshi.documentation.getting_started.index.quick_start_body') %></p>
+
+<%= doc_steps do %>
+  <%= doc_step(1, 'oroshi.documentation.getting_started.index.step_1') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.getting_started.index.step_1_desc') %></p>
+  <% end %>
+  <%= doc_step(2, 'oroshi.documentation.getting_started.index.step_2') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.getting_started.index.step_2_desc') %></p>
+  <% end %>
+  <%= doc_step(3, 'oroshi.documentation.getting_started.index.step_3') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.getting_started.index.step_3_desc') %></p>
+  <% end %>
+  <%= doc_step(4, 'oroshi.documentation.getting_started.index.step_4') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.getting_started.index.step_4_desc') %></p>
+  <% end %>
+  <%= doc_step(5, 'oroshi.documentation.getting_started.index.step_5') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.getting_started.index.step_5_desc') %></p>
+  <% end %>
+  <%= doc_step(6, 'oroshi.documentation.getting_started.index.step_6') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.getting_started.index.step_6_desc') %></p>
+  <% end %>
+<% end %>
+
+<%= doc_see_also("getting_started/first_login", "getting_started/onboarding", "admin/company_setup") %>
diff --git a/app/views/oroshi/documentation/getting_started/navigation.html.erb b/app/views/oroshi/documentation/getting_started/navigation.html.erb
new file mode 100644
index 0000000..334b853
--- /dev/null
+++ b/app/views/oroshi/documentation/getting_started/navigation.html.erb
@@ -0,0 +1,21 @@
+<% title t('oroshi.documentation.getting_started.navigation.title') %>
+
+<h1><%= t('oroshi.documentation.getting_started.navigation.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.getting_started.navigation.intro') %></p>
+
+<h2><%= t('oroshi.documentation.getting_started.navigation.navbar_items') %></h2>
+<ul>
+  <li><strong><%= t('oroshi.documentation.getting_started.navigation.item_dashboard') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.getting_started.navigation.item_supplies') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.getting_started.navigation.item_orders') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.getting_started.navigation.item_search') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.getting_started.navigation.item_payments') %></strong></li>
+</ul>
+
+<h2><%= t('oroshi.documentation.getting_started.navigation.language_toggle') %></h2>
+<p><%= t('oroshi.documentation.getting_started.navigation.language_toggle_body') %></p>
+
+<h2><%= t('oroshi.documentation.getting_started.navigation.user_menu') %></h2>
+<p><%= t('oroshi.documentation.getting_started.navigation.user_menu_body') %></p>
+
+<%= doc_see_also("getting_started/first_login", "orders/dashboard_tabs") %>
diff --git a/app/views/oroshi/documentation/getting_started/onboarding.html.erb b/app/views/oroshi/documentation/getting_started/onboarding.html.erb
new file mode 100644
index 0000000..a68925f
--- /dev/null
+++ b/app/views/oroshi/documentation/getting_started/onboarding.html.erb
@@ -0,0 +1,59 @@
+<% title t('oroshi.documentation.getting_started.onboarding.title') %>
+
+<h1><%= t('oroshi.documentation.getting_started.onboarding.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.getting_started.onboarding.intro') %></p>
+
+<h2><%= t('oroshi.documentation.getting_started.onboarding.what_is_onboarding') %></h2>
+<p><%= t('oroshi.documentation.getting_started.onboarding.what_is_onboarding_body') %></p>
+
+<h2><%= t('oroshi.documentation.getting_started.onboarding.phases') %></h2>
+
+<div class="row g-3 mb-4">
+  <div class="col-md-6">
+    <div class="card h-100">
+      <div class="card-body">
+        <h6 class="card-title text-primary">1. <%= t('oroshi.documentation.getting_started.onboarding.phase_foundation') %></h6>
+        <p class="card-text small text-muted mb-0"><%= t('oroshi.documentation.getting_started.onboarding.phase_foundation_desc') %></p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="card h-100">
+      <div class="card-body">
+        <h6 class="card-title text-primary">2. <%= t('oroshi.documentation.getting_started.onboarding.phase_supply') %></h6>
+        <p class="card-text small text-muted mb-0"><%= t('oroshi.documentation.getting_started.onboarding.phase_supply_desc') %></p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="card h-100">
+      <div class="card-body">
+        <h6 class="card-title text-primary">3. <%= t('oroshi.documentation.getting_started.onboarding.phase_sales') %></h6>
+        <p class="card-text small text-muted mb-0"><%= t('oroshi.documentation.getting_started.onboarding.phase_sales_desc') %></p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="card h-100">
+      <div class="card-body">
+        <h6 class="card-title text-primary">4. <%= t('oroshi.documentation.getting_started.onboarding.phase_shipping') %></h6>
+        <p class="card-text small text-muted mb-0"><%= t('oroshi.documentation.getting_started.onboarding.phase_shipping_desc') %></p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%= doc_diagram("graph LR
+  A[#{t('oroshi.documentation.getting_started.onboarding.phase_foundation')}] --> B[#{t('oroshi.documentation.getting_started.onboarding.phase_supply')}]
+  B --> C[#{t('oroshi.documentation.getting_started.onboarding.phase_sales')}]
+  C --> D[#{t('oroshi.documentation.getting_started.onboarding.phase_shipping')}]") %>
+
+<h2><%= t('oroshi.documentation.getting_started.onboarding.checklist') %></h2>
+<p><%= t('oroshi.documentation.getting_started.onboarding.checklist_body') %></p>
+
+<%= doc_callout(:tip) do %>
+  <strong><%= t('oroshi.documentation.getting_started.onboarding.skip_option') %></strong><br>
+  <%= t('oroshi.documentation.getting_started.onboarding.skip_option_body') %>
+<% end %>
+
+<%= doc_see_also("admin/company_setup", "supply_chain/suppliers", "admin/buyer_management", "admin/product_management") %>
diff --git a/app/views/oroshi/documentation/index.html.erb b/app/views/oroshi/documentation/index.html.erb
new file mode 100644
index 0000000..6180d8f
--- /dev/null
+++ b/app/views/oroshi/documentation/index.html.erb
@@ -0,0 +1,32 @@
+<% title t('oroshi.documentation.chrome.title') %>
+
+<h1><%= t('oroshi.documentation.index.title') %></h1>
+<p class="lead text-muted"><%= t('oroshi.documentation.index.subtitle') %></p>
+
+<div class="row g-4 mt-2">
+  <% @sections.each do |section_key, pages| %>
+    <div class="col-md-6 col-lg-4">
+      <div class="card h-100 border-0 shadow-sm">
+        <div class="card-body">
+          <h5 class="card-title">
+            <i class="bi bi-<%= section_icon(section_key) %> text-primary me-2"></i>
+            <%= link_to t("oroshi.documentation.sections.#{section_key}"),
+                  documentation_section_path(section: section_key, locale: I18n.locale),
+                  class: "text-decoration-none" %>
+          </h5>
+          <p class="card-text text-muted small"><%= t("oroshi.documentation.section_descriptions.#{section_key}") %></p>
+          <ul class="list-unstyled small mb-0">
+            <% pages.each do |page_name| %>
+              <li class="mb-1">
+                <i class="bi bi-chevron-right text-muted me-1" style="font-size: 0.7rem;"></i>
+                <%= link_to t("oroshi.documentation.pages.#{section_key}.#{page_name}"),
+                      documentation_page_path(section: section_key, page: page_name, locale: I18n.locale),
+                      class: "text-decoration-none" %>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/oroshi/documentation/orders/bundling_orders.html.erb b/app/views/oroshi/documentation/orders/bundling_orders.html.erb
new file mode 100644
index 0000000..92c78f1
--- /dev/null
+++ b/app/views/oroshi/documentation/orders/bundling_orders.html.erb
@@ -0,0 +1,18 @@
+<% title t('oroshi.documentation.orders.bundling_orders.title') %>
+
+<h1><%= t('oroshi.documentation.orders.bundling_orders.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.orders.bundling_orders.intro') %></p>
+
+<h2><%= t('oroshi.documentation.orders.bundling_orders.what_is_bundling') %></h2>
+<p><%= t('oroshi.documentation.orders.bundling_orders.what_is_bundling_body') %></p>
+
+<h2><%= t('oroshi.documentation.orders.bundling_orders.how_to_bundle') %></h2>
+<p><%= t('oroshi.documentation.orders.bundling_orders.how_to_bundle_body') %></p>
+
+<h2><%= t('oroshi.documentation.orders.bundling_orders.cost_savings') %></h2>
+
+<%= doc_callout(:tip) do %>
+  <%= t('oroshi.documentation.orders.bundling_orders.cost_savings_body') %>
+<% end %>
+
+<%= doc_see_also("orders/creating_orders", "shipping/shipping_methods", "financials/profit_calculation") %>
diff --git a/app/views/oroshi/documentation/orders/creating_orders.html.erb b/app/views/oroshi/documentation/orders/creating_orders.html.erb
new file mode 100644
index 0000000..e6e893d
--- /dev/null
+++ b/app/views/oroshi/documentation/orders/creating_orders.html.erb
@@ -0,0 +1,61 @@
+<% title t('oroshi.documentation.orders.creating_orders.title') %>
+
+<h1><%= t('oroshi.documentation.orders.creating_orders.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.orders.creating_orders.intro') %></p>
+
+<h2><%= t('oroshi.documentation.orders.creating_orders.how_it_works') %></h2>
+
+<%= doc_steps do %>
+  <%= doc_step(1, 'oroshi.documentation.orders.creating_orders.step_select_date') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.creating_orders.step_select_date_desc') %></p>
+  <% end %>
+  <%= doc_step(2, 'oroshi.documentation.orders.creating_orders.step_open_form') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.creating_orders.step_open_form_desc') %></p>
+  <% end %>
+  <%= doc_step(3, 'oroshi.documentation.orders.creating_orders.step_select_buyer') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.creating_orders.step_select_buyer_desc') %></p>
+  <% end %>
+  <%= doc_step(4, 'oroshi.documentation.orders.creating_orders.step_select_product') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.creating_orders.step_select_product_desc') %></p>
+  <% end %>
+  <%= doc_step(5, 'oroshi.documentation.orders.creating_orders.step_enter_quantities') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.creating_orders.step_enter_quantities_desc') %></p>
+  <% end %>
+  <%= doc_step(6, 'oroshi.documentation.orders.creating_orders.step_save') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.creating_orders.step_save_desc') %></p>
+  <% end %>
+<% end %>
+
+<%= doc_diagram("graph LR
+  A[Buyer] -->|filters| B[Shipping Method]
+  A -->|filters| C[Receptacle]
+  D[Product] -->|filters| E[Product Variation]
+  E -->|sets| F[Unit Price]
+  B & C & F -->|calculate| G[Costs]") %>
+
+<h2><%= t('oroshi.documentation.orders.creating_orders.cascading_fields') %></h2>
+<p><%= t('oroshi.documentation.orders.creating_orders.cascading_fields_body') %></p>
+
+<h2><%= t('oroshi.documentation.orders.creating_orders.auto_calculation') %></h2>
+<p><%= t('oroshi.documentation.orders.creating_orders.auto_calculation_body') %></p>
+
+<div class="table-responsive">
+  <table class="table table-sm table-bordered">
+    <tbody>
+      <% %w[shipping materials revenue profit].each do |calc| %>
+        <tr>
+          <td class="fw-semibold bg-light" style="width: 30%;"><%= t("oroshi.documentation.orders.creating_orders.label_#{calc}") %></td>
+          <td><code><%= t("oroshi.documentation.orders.creating_orders.calc_#{calc}") %></code></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<h2><%= t('oroshi.documentation.orders.creating_orders.realtime_updates') %></h2>
+
+<%= doc_callout(:info) do %>
+  <%= t('oroshi.documentation.orders.creating_orders.realtime_updates_body') %>
+<% end %>
+
+<%= doc_see_also("orders/order_templates", "orders/bundling_orders", "admin/buyer_management", "admin/product_management", "shipping/shipping_methods") %>
diff --git a/app/views/oroshi/documentation/orders/dashboard_tabs.html.erb b/app/views/oroshi/documentation/orders/dashboard_tabs.html.erb
new file mode 100644
index 0000000..a6dbb0a
--- /dev/null
+++ b/app/views/oroshi/documentation/orders/dashboard_tabs.html.erb
@@ -0,0 +1,19 @@
+<% title t('oroshi.documentation.orders.dashboard_tabs.title') %>
+
+<h1><%= t('oroshi.documentation.orders.dashboard_tabs.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.orders.dashboard_tabs.intro') %></p>
+
+<div class="row g-3">
+  <% %w[orders templates supply_usage production shipping sales revenue].each_with_index do |tab, i| %>
+    <div class="col-md-6">
+      <div class="card h-100">
+        <div class="card-body">
+          <h6 class="card-title"><%= i + 1 %>. <%= t("oroshi.documentation.orders.dashboard_tabs.tab_#{tab}") %></h6>
+          <p class="card-text small text-muted mb-0"><%= t("oroshi.documentation.orders.dashboard_tabs.tab_#{tab}_desc") %></p>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<%= doc_see_also("orders/creating_orders", "production/factory_floor", "shipping/shipping_dashboard", "financials/revenue_tracking") %>
diff --git a/app/views/oroshi/documentation/orders/index.html.erb b/app/views/oroshi/documentation/orders/index.html.erb
new file mode 100644
index 0000000..a136d55
--- /dev/null
+++ b/app/views/oroshi/documentation/orders/index.html.erb
@@ -0,0 +1,32 @@
+<% title t('oroshi.documentation.orders.index.title') %>
+
+<h1><%= t('oroshi.documentation.orders.index.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.orders.index.intro') %></p>
+
+<h2><%= t('oroshi.documentation.orders.index.overview') %></h2>
+<p><%= t('oroshi.documentation.orders.index.overview_body') %></p>
+
+<h2><%= t('oroshi.documentation.orders.index.workflow_title') %></h2>
+<p><%= t('oroshi.documentation.orders.index.workflow_intro') %></p>
+
+<%= doc_diagram("graph TD
+  A[#{t('oroshi.documentation.orders.index.workflow_step_1')}] --> B[#{t('oroshi.documentation.orders.index.workflow_step_2')}]
+  B --> C[#{t('oroshi.documentation.orders.index.workflow_step_3')}]
+  C --> D[#{t('oroshi.documentation.orders.index.workflow_step_4')}]") %>
+
+<%= doc_steps do %>
+  <%= doc_step(1, 'oroshi.documentation.orders.index.workflow_step_1') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.index.workflow_step_1_desc') %></p>
+  <% end %>
+  <%= doc_step(2, 'oroshi.documentation.orders.index.workflow_step_2') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.index.workflow_step_2_desc') %></p>
+  <% end %>
+  <%= doc_step(3, 'oroshi.documentation.orders.index.workflow_step_3') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.index.workflow_step_3_desc') %></p>
+  <% end %>
+  <%= doc_step(4, 'oroshi.documentation.orders.index.workflow_step_4') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.index.workflow_step_4_desc') %></p>
+  <% end %>
+<% end %>
+
+<%= doc_see_also("orders/creating_orders", "orders/order_lifecycle", "orders/dashboard_tabs") %>
diff --git a/app/views/oroshi/documentation/orders/order_lifecycle.html.erb b/app/views/oroshi/documentation/orders/order_lifecycle.html.erb
new file mode 100644
index 0000000..38ff3ba
--- /dev/null
+++ b/app/views/oroshi/documentation/orders/order_lifecycle.html.erb
@@ -0,0 +1,36 @@
+<% title t('oroshi.documentation.orders.order_lifecycle.title') %>
+
+<h1><%= t('oroshi.documentation.orders.order_lifecycle.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.orders.order_lifecycle.intro') %></p>
+
+<h2><%= t('oroshi.documentation.orders.order_lifecycle.stages') %></h2>
+
+<%= doc_diagram("graph LR
+  A[#{t('oroshi.documentation.orders.order_lifecycle.stage_created')}] --> B[#{t('oroshi.documentation.orders.order_lifecycle.stage_shipped')}]
+  B --> C[#{t('oroshi.documentation.orders.order_lifecycle.stage_paid')}]
+  style A fill:#e3f2fd
+  style B fill:#fff3e0
+  style C fill:#e8f5e9") %>
+
+<%= doc_steps do %>
+  <%= doc_step(1, 'oroshi.documentation.orders.order_lifecycle.stage_created') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.order_lifecycle.stage_created_desc') %></p>
+  <% end %>
+  <%= doc_step(2, 'oroshi.documentation.orders.order_lifecycle.stage_shipped') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.order_lifecycle.stage_shipped_desc') %></p>
+  <% end %>
+  <%= doc_step(3, 'oroshi.documentation.orders.order_lifecycle.stage_paid') do %>
+    <p class="text-muted mb-0"><%= t('oroshi.documentation.orders.order_lifecycle.stage_paid_desc') %></p>
+  <% end %>
+<% end %>
+
+<h2><%= t('oroshi.documentation.orders.order_lifecycle.status_indicators') %></h2>
+<p><%= t('oroshi.documentation.orders.order_lifecycle.status_indicators_body') %></p>
+
+<h2><%= t('oroshi.documentation.orders.order_lifecycle.inventory_impact') %></h2>
+
+<%= doc_callout(:warning) do %>
+  <%= t('oroshi.documentation.orders.order_lifecycle.inventory_impact_body') %>
+<% end %>
+
+<%= doc_see_also("orders/creating_orders", "production/production_requests", "financials/payment_receipts") %>
diff --git a/app/views/oroshi/documentation/orders/order_templates.html.erb b/app/views/oroshi/documentation/orders/order_templates.html.erb
new file mode 100644
index 0000000..2373e3e
--- /dev/null
+++ b/app/views/oroshi/documentation/orders/order_templates.html.erb
@@ -0,0 +1,21 @@
+<% title t('oroshi.documentation.orders.order_templates.title') %>
+
+<h1><%= t('oroshi.documentation.orders.order_templates.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.orders.order_templates.intro') %></p>
+
+<h2><%= t('oroshi.documentation.orders.order_templates.what_are_templates') %></h2>
+<p><%= t('oroshi.documentation.orders.order_templates.what_are_templates_body') %></p>
+
+<h2><%= t('oroshi.documentation.orders.order_templates.creating_template') %></h2>
+<p><%= t('oroshi.documentation.orders.order_templates.creating_template_body') %></p>
+
+<h2><%= t('oroshi.documentation.orders.order_templates.using_template') %></h2>
+
+<%= doc_callout(:tip) do %>
+  <%= t('oroshi.documentation.orders.order_templates.using_template_body') %>
+<% end %>
+
+<h2><%= t('oroshi.documentation.orders.order_templates.managing_templates') %></h2>
+<p><%= t('oroshi.documentation.orders.order_templates.managing_templates_body') %></p>
+
+<%= doc_see_also("orders/creating_orders", "orders/dashboard_tabs") %>
diff --git a/app/views/oroshi/documentation/orders/searching_orders.html.erb b/app/views/oroshi/documentation/orders/searching_orders.html.erb
new file mode 100644
index 0000000..9fdbdb6
--- /dev/null
+++ b/app/views/oroshi/documentation/orders/searching_orders.html.erb
@@ -0,0 +1,19 @@
+<% title t('oroshi.documentation.orders.searching_orders.title') %>
+
+<h1><%= t('oroshi.documentation.orders.searching_orders.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.orders.searching_orders.intro') %></p>
+
+<h2><%= t('oroshi.documentation.orders.searching_orders.search_methods') %></h2>
+<ul>
+  <li><%= t('oroshi.documentation.orders.searching_orders.method_date') %></li>
+  <li><%= t('oroshi.documentation.orders.searching_orders.method_keyword') %></li>
+  <li><%= t('oroshi.documentation.orders.searching_orders.method_filter') %></li>
+</ul>
+
+<h2><%= t('oroshi.documentation.orders.searching_orders.calendar_view') %></h2>
+<p><%= t('oroshi.documentation.orders.searching_orders.calendar_view_body') %></p>
+
+<h2><%= t('oroshi.documentation.orders.searching_orders.advanced_search') %></h2>
+<p><%= t('oroshi.documentation.orders.searching_orders.advanced_search_body') %></p>
+
+<%= doc_see_also("orders/dashboard_tabs", "orders/creating_orders") %>
diff --git a/app/views/oroshi/documentation/production/factory_floor.html.erb b/app/views/oroshi/documentation/production/factory_floor.html.erb
new file mode 100644
index 0000000..059b9c7
--- /dev/null
+++ b/app/views/oroshi/documentation/production/factory_floor.html.erb
@@ -0,0 +1,19 @@
+<% title t('oroshi.documentation.production.factory_floor.title') %>
+
+<h1><%= t('oroshi.documentation.production.factory_floor.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.production.factory_floor.intro') %></p>
+
+<h2><%= t('oroshi.documentation.production.factory_floor.views') %></h2>
+<ul>
+  <li><strong><%= t('oroshi.documentation.production.factory_floor.view_manufacture_date') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.production.factory_floor.view_shipping_date') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.production.factory_floor.view_by_zone') %></strong></li>
+</ul>
+
+<h2><%= t('oroshi.documentation.production.factory_floor.realtime') %></h2>
+
+<%= doc_callout(:info) do %>
+  <%= t('oroshi.documentation.production.factory_floor.realtime_body') %>
+<% end %>
+
+<%= doc_see_also("production/production_zones", "orders/dashboard_tabs") %>
diff --git a/app/views/oroshi/documentation/production/index.html.erb b/app/views/oroshi/documentation/production/index.html.erb
new file mode 100644
index 0000000..dd5cd42
--- /dev/null
+++ b/app/views/oroshi/documentation/production/index.html.erb
@@ -0,0 +1,22 @@
+<% title t('oroshi.documentation.production.index.title') %>
+
+<h1><%= t('oroshi.documentation.production.index.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.production.index.intro') %></p>
+
+<h2><%= t('oroshi.documentation.production.index.overview') %></h2>
+<p><%= t('oroshi.documentation.production.index.overview_body') %></p>
+
+<h2><%= t('oroshi.documentation.production.index.flow') %></h2>
+<ul>
+  <li><%= t('oroshi.documentation.production.index.flow_step_1') %></li>
+  <li><%= t('oroshi.documentation.production.index.flow_step_2') %></li>
+  <li><%= t('oroshi.documentation.production.index.flow_step_3') %></li>
+  <li><%= t('oroshi.documentation.production.index.flow_step_4') %></li>
+</ul>
+
+<%= doc_diagram("graph TD
+  A[Orders] --> B[Production Requests]
+  B --> C[Manufacturing]
+  C --> D[Shipping / Inventory Update]") %>
+
+<%= doc_see_also("production/production_zones", "production/production_requests", "production/factory_floor") %>
diff --git a/app/views/oroshi/documentation/production/production_requests.html.erb b/app/views/oroshi/documentation/production/production_requests.html.erb
new file mode 100644
index 0000000..5489382
--- /dev/null
+++ b/app/views/oroshi/documentation/production/production_requests.html.erb
@@ -0,0 +1,15 @@
+<% title t('oroshi.documentation.production.production_requests.title') %>
+
+<h1><%= t('oroshi.documentation.production.production_requests.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.production.production_requests.intro') %></p>
+
+<h2><%= t('oroshi.documentation.production.production_requests.creating_requests') %></h2>
+<p><%= t('oroshi.documentation.production.production_requests.creating_requests_body') %></p>
+
+<h2><%= t('oroshi.documentation.production.production_requests.tracking') %></h2>
+<p><%= t('oroshi.documentation.production.production_requests.tracking_body') %></p>
+
+<h2><%= t('oroshi.documentation.production.production_requests.fulfillment') %></h2>
+<p><%= t('oroshi.documentation.production.production_requests.fulfillment_body') %></p>
+
+<%= doc_see_also("production/factory_floor", "orders/order_lifecycle") %>
diff --git a/app/views/oroshi/documentation/production/production_zones.html.erb b/app/views/oroshi/documentation/production/production_zones.html.erb
new file mode 100644
index 0000000..995aca6
--- /dev/null
+++ b/app/views/oroshi/documentation/production/production_zones.html.erb
@@ -0,0 +1,15 @@
+<% title t('oroshi.documentation.production.production_zones.title') %>
+
+<h1><%= t('oroshi.documentation.production.production_zones.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.production.production_zones.intro') %></p>
+
+<h2><%= t('oroshi.documentation.production.production_zones.what_are_zones') %></h2>
+<p><%= t('oroshi.documentation.production.production_zones.what_are_zones_body') %></p>
+
+<h2><%= t('oroshi.documentation.production.production_zones.configuring') %></h2>
+<p><%= t('oroshi.documentation.production.production_zones.configuring_body') %></p>
+
+<h2><%= t('oroshi.documentation.production.production_zones.zone_assignment') %></h2>
+<p><%= t('oroshi.documentation.production.production_zones.zone_assignment_body') %></p>
+
+<%= doc_see_also("production/factory_floor", "admin/product_management") %>
diff --git a/app/views/oroshi/documentation/shipping/index.html.erb b/app/views/oroshi/documentation/shipping/index.html.erb
new file mode 100644
index 0000000..df9db8b
--- /dev/null
+++ b/app/views/oroshi/documentation/shipping/index.html.erb
@@ -0,0 +1,14 @@
+<% title t('oroshi.documentation.shipping.index.title') %>
+
+<h1><%= t('oroshi.documentation.shipping.index.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.shipping.index.intro') %></p>
+
+<h2><%= t('oroshi.documentation.shipping.index.overview') %></h2>
+<p><%= t('oroshi.documentation.shipping.index.overview_body') %></p>
+
+<%= doc_diagram("graph LR
+  A[Shipping Organization] --> B[Shipping Method]
+  B --> C[Receptacle]
+  B --> D[Cost Calculation]") %>
+
+<%= doc_see_also("shipping/shipping_methods", "shipping/receptacles", "shipping/shipping_dashboard") %>
diff --git a/app/views/oroshi/documentation/shipping/receptacles.html.erb b/app/views/oroshi/documentation/shipping/receptacles.html.erb
new file mode 100644
index 0000000..26d9f23
--- /dev/null
+++ b/app/views/oroshi/documentation/shipping/receptacles.html.erb
@@ -0,0 +1,15 @@
+<% title t('oroshi.documentation.shipping.receptacles.title') %>
+
+<h1><%= t('oroshi.documentation.shipping.receptacles.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.shipping.receptacles.intro') %></p>
+
+<h2><%= t('oroshi.documentation.shipping.receptacles.what_are_receptacles') %></h2>
+<p><%= t('oroshi.documentation.shipping.receptacles.what_are_receptacles_body') %></p>
+
+<h2><%= t('oroshi.documentation.shipping.receptacles.per_box_estimate') %></h2>
+<p><%= t('oroshi.documentation.shipping.receptacles.per_box_estimate_body') %></p>
+
+<h2><%= t('oroshi.documentation.shipping.receptacles.managing') %></h2>
+<p><%= t('oroshi.documentation.shipping.receptacles.managing_body') %></p>
+
+<%= doc_see_also("orders/creating_orders", "financials/materials_costs") %>
diff --git a/app/views/oroshi/documentation/shipping/shipping_dashboard.html.erb b/app/views/oroshi/documentation/shipping/shipping_dashboard.html.erb
new file mode 100644
index 0000000..438e15a
--- /dev/null
+++ b/app/views/oroshi/documentation/shipping/shipping_dashboard.html.erb
@@ -0,0 +1,15 @@
+<% title t('oroshi.documentation.shipping.shipping_dashboard.title') %>
+
+<h1><%= t('oroshi.documentation.shipping.shipping_dashboard.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.shipping.shipping_dashboard.intro') %></p>
+
+<h2><%= t('oroshi.documentation.shipping.shipping_dashboard.shipping_chart') %></h2>
+<p><%= t('oroshi.documentation.shipping.shipping_dashboard.shipping_chart_body') %></p>
+
+<h2><%= t('oroshi.documentation.shipping.shipping_dashboard.shipping_list') %></h2>
+<p><%= t('oroshi.documentation.shipping.shipping_dashboard.shipping_list_body') %></p>
+
+<h2><%= t('oroshi.documentation.shipping.shipping_dashboard.shipping_slips') %></h2>
+<p><%= t('oroshi.documentation.shipping.shipping_dashboard.shipping_slips_body') %></p>
+
+<%= doc_see_also("orders/dashboard_tabs", "orders/bundling_orders") %>
diff --git a/app/views/oroshi/documentation/shipping/shipping_methods.html.erb b/app/views/oroshi/documentation/shipping/shipping_methods.html.erb
new file mode 100644
index 0000000..3d63d31
--- /dev/null
+++ b/app/views/oroshi/documentation/shipping/shipping_methods.html.erb
@@ -0,0 +1,19 @@
+<% title t('oroshi.documentation.shipping.shipping_methods.title') %>
+
+<h1><%= t('oroshi.documentation.shipping.shipping_methods.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.shipping.shipping_methods.intro') %></p>
+
+<h2><%= t('oroshi.documentation.shipping.shipping_methods.structure') %></h2>
+<p><%= t('oroshi.documentation.shipping.shipping_methods.structure_body') %></p>
+
+<h2><%= t('oroshi.documentation.shipping.shipping_methods.cost_components') %></h2>
+<ul>
+  <li><strong><%= t('oroshi.documentation.shipping.shipping_methods.cost_per_receptacle') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.shipping.shipping_methods.cost_per_freight') %></strong></li>
+  <li><strong><%= t('oroshi.documentation.shipping.shipping_methods.cost_departure') %></strong></li>
+</ul>
+
+<h2><%= t('oroshi.documentation.shipping.shipping_methods.configuring') %></h2>
+<p><%= t('oroshi.documentation.shipping.shipping_methods.configuring_body') %></p>
+
+<%= doc_see_also("orders/creating_orders", "admin/buyer_management", "financials/profit_calculation") %>
diff --git a/app/views/oroshi/documentation/supply_chain/index.html.erb b/app/views/oroshi/documentation/supply_chain/index.html.erb
new file mode 100644
index 0000000..feeebb0
--- /dev/null
+++ b/app/views/oroshi/documentation/supply_chain/index.html.erb
@@ -0,0 +1,22 @@
+<% title t('oroshi.documentation.supply_chain.index.title') %>
+
+<h1><%= t('oroshi.documentation.supply_chain.index.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.supply_chain.index.intro') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.index.overview') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.index.overview_body') %></p>
+
+<%= doc_diagram("graph LR
+  A[#{t('oroshi.documentation.supply_chain.index.diagram_supplier_org')}] --> B[#{t('oroshi.documentation.supply_chain.index.diagram_supplier')}]
+  B --> C[#{t('oroshi.documentation.supply_chain.index.diagram_supply_type')}]
+  C --> D[#{t('oroshi.documentation.supply_chain.index.diagram_variation')}]") %>
+
+<h2><%= t('oroshi.documentation.supply_chain.index.data_flow') %></h2>
+<ul>
+  <li><%= t('oroshi.documentation.supply_chain.index.data_flow_item_1') %></li>
+  <li><%= t('oroshi.documentation.supply_chain.index.data_flow_item_2') %></li>
+  <li><%= t('oroshi.documentation.supply_chain.index.data_flow_item_3') %></li>
+  <li><%= t('oroshi.documentation.supply_chain.index.data_flow_item_4') %></li>
+</ul>
+
+<%= doc_see_also("supply_chain/supply_intake", "supply_chain/suppliers", "supply_chain/supply_types") %>
diff --git a/app/views/oroshi/documentation/supply_chain/suppliers.html.erb b/app/views/oroshi/documentation/supply_chain/suppliers.html.erb
new file mode 100644
index 0000000..d6fd2d2
--- /dev/null
+++ b/app/views/oroshi/documentation/supply_chain/suppliers.html.erb
@@ -0,0 +1,15 @@
+<% title t('oroshi.documentation.supply_chain.suppliers.title') %>
+
+<h1><%= t('oroshi.documentation.supply_chain.suppliers.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.supply_chain.suppliers.intro') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.suppliers.organization_level') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.suppliers.organization_level_body') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.suppliers.supplier_details') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.suppliers.supplier_details_body') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.suppliers.managing_suppliers') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.suppliers.managing_suppliers_body') %></p>
+
+<%= doc_see_also("supply_chain/supply_types", "financials/invoices") %>
diff --git a/app/views/oroshi/documentation/supply_chain/supply_check_sheets.html.erb b/app/views/oroshi/documentation/supply_chain/supply_check_sheets.html.erb
new file mode 100644
index 0000000..03609d3
--- /dev/null
+++ b/app/views/oroshi/documentation/supply_chain/supply_check_sheets.html.erb
@@ -0,0 +1,15 @@
+<% title t('oroshi.documentation.supply_chain.supply_check_sheets.title') %>
+
+<h1><%= t('oroshi.documentation.supply_chain.supply_check_sheets.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.supply_chain.supply_check_sheets.intro') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.supply_check_sheets.generating') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.supply_check_sheets.generating_body') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.supply_check_sheets.contents') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.supply_check_sheets.contents_body') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.supply_check_sheets.printing') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.supply_check_sheets.printing_body') %></p>
+
+<%= doc_see_also("supply_chain/supply_intake") %>
diff --git a/app/views/oroshi/documentation/supply_chain/supply_intake.html.erb b/app/views/oroshi/documentation/supply_chain/supply_intake.html.erb
new file mode 100644
index 0000000..ff8dabc
--- /dev/null
+++ b/app/views/oroshi/documentation/supply_chain/supply_intake.html.erb
@@ -0,0 +1,15 @@
+<% title t('oroshi.documentation.supply_chain.supply_intake.title') %>
+
+<h1><%= t('oroshi.documentation.supply_chain.supply_intake.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.supply_chain.supply_intake.intro') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.supply_intake.daily_workflow') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.supply_intake.daily_workflow_body') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.supply_intake.entry_form') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.supply_intake.entry_form_body') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.supply_intake.reception_times') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.supply_intake.reception_times_body') %></p>
+
+<%= doc_see_also("supply_chain/suppliers", "supply_chain/supply_check_sheets") %>
diff --git a/app/views/oroshi/documentation/supply_chain/supply_types.html.erb b/app/views/oroshi/documentation/supply_chain/supply_types.html.erb
new file mode 100644
index 0000000..bc4854c
--- /dev/null
+++ b/app/views/oroshi/documentation/supply_chain/supply_types.html.erb
@@ -0,0 +1,15 @@
+<% title t('oroshi.documentation.supply_chain.supply_types.title') %>
+
+<h1><%= t('oroshi.documentation.supply_chain.supply_types.title') %></h1>
+<p class="lead"><%= t('oroshi.documentation.supply_chain.supply_types.intro') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.supply_types.type_hierarchy') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.supply_types.type_hierarchy_body') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.supply_types.creating_types') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.supply_types.creating_types_body') %></p>
+
+<h2><%= t('oroshi.documentation.supply_chain.supply_types.variations') %></h2>
+<p><%= t('oroshi.documentation.supply_chain.supply_types.variations_body') %></p>
+
+<%= doc_see_also("supply_chain/supply_intake", "admin/product_management") %>
diff --git a/config/locales/documentation.en.yml b/config/locales/documentation.en.yml
new file mode 100644
index 0000000..516d63a
--- /dev/null
+++ b/config/locales/documentation.en.yml
@@ -0,0 +1,527 @@
+en:
+  oroshi:
+    documentation:
+      chrome:
+        title: "Oroshi Documentation"
+        home: "Home"
+        overview: "Documentation Overview"
+        search_placeholder: "Search documentation..."
+        see_also: "Related Pages"
+        help_tooltip: "View help"
+      messages:
+        invalid_section: "The specified section was not found."
+        invalid_page: "The specified page was not found."
+      index:
+        title: "Oroshi Documentation"
+        subtitle: "User guide for the wholesale order management system"
+      sections:
+        getting_started: "Getting Started"
+        orders: "Order Management"
+        supply_chain: "Supply Chain"
+        production: "Production"
+        shipping: "Shipping"
+        financials: "Financials"
+        admin: "Administration"
+      section_descriptions:
+        getting_started: "Learn the basics of Oroshi, from logging in to navigating the system and completing the initial setup."
+        orders: "Create orders, use templates, manage the order lifecycle, and understand the core workflow of the system."
+        supply_chain: "Enter daily supply data, manage suppliers, configure supply types, and generate check sheets."
+        production: "Configure production zones, create production requests, and manage the factory floor schedule."
+        shipping: "Set up shipping methods, manage receptacles, and use the shipping dashboard for logistics."
+        financials: "Track revenue, understand profit calculations, manage payment receipts, and generate invoices."
+        admin: "Configure company information, manage buyers, products, and user access."
+      pages:
+        getting_started:
+          first_login: "First Login"
+          navigation: "Navigation"
+          onboarding: "Onboarding"
+        orders:
+          creating_orders: "Creating Orders"
+          order_templates: "Order Templates"
+          order_lifecycle: "Order Lifecycle"
+          bundling_orders: "Bundling Orders"
+          searching_orders: "Searching Orders"
+          dashboard_tabs: "Dashboard Tabs"
+        supply_chain:
+          supply_intake: "Supply Intake"
+          suppliers: "Supplier Management"
+          supply_types: "Supply Types"
+          supply_check_sheets: "Supply Check Sheets"
+        production:
+          production_zones: "Production Zones"
+          production_requests: "Production Requests"
+          factory_floor: "Factory Floor Schedule"
+        shipping:
+          shipping_methods: "Shipping Methods"
+          receptacles: "Receptacle Management"
+          shipping_dashboard: "Shipping Dashboard"
+        financials:
+          revenue_tracking: "Revenue Tracking"
+          profit_calculation: "Profit Calculation"
+          payment_receipts: "Payment Receipts"
+          invoices: "Invoice Management"
+          materials_costs: "Materials & Costs"
+        admin:
+          company_setup: "Company Setup"
+          buyer_management: "Buyer Management"
+          product_management: "Product Management"
+          user_management: "User Management"
+
+      # =========================================================
+      # Getting Started Section
+      # =========================================================
+      getting_started:
+        index:
+          title: "Getting Started"
+          intro: "Oroshi is a wholesale order management system. It provides end-to-end management from supply intake to orders, shipping, and payment collection."
+          what_is_oroshi: "What is Oroshi?"
+          what_is_oroshi_body: "Oroshi is an order management system designed for wholesale distributors. Once configured, most orders can be entered with just 1-2 clicks, automatically populating factory floor schedules, profit tracking, and payment management."
+          key_features: "Key Features"
+          feature_orders: "Order Management — Create, edit, template, and bundle orders"
+          feature_supply: "Supply Management — Manage suppliers, supply types, and check sheets"
+          feature_production: "Production Management — Zone-based schedules and production requests"
+          feature_shipping: "Shipping Management — Shipping methods, receptacles, and shipping slips"
+          feature_financials: "Financials — Revenue tracking, profit calculation, payments, and invoices"
+          feature_admin: "Administration — Company info, buyers, products, and users"
+          quick_start: "Quick Start"
+          quick_start_body: "If this is your first time using Oroshi, follow these steps to set up the system."
+          step_1: "Set up company information"
+          step_1_desc: "Register your company name, address, and contact details."
+          step_2: "Add suppliers and supply types"
+          step_2_desc: "Configure your suppliers and the products they supply."
+          step_3: "Register buyers"
+          step_3_desc: "Add your buyers (wholesale markets, restaurants, etc.)."
+          step_4: "Configure products"
+          step_4_desc: "Create products and their variations (size, quality)."
+          step_5: "Set up shipping methods and receptacles"
+          step_5_desc: "Add carriers, shipping methods, and receptacles."
+          step_6: "Start entering orders"
+          step_6_desc: "Once all settings are complete, you can start entering orders from the orders page."
+        first_login:
+          title: "First Login"
+          intro: "When you first log in to Oroshi, you'll see the dashboard. This page explains the screen layout and basic operations."
+          dashboard_overview: "Dashboard Overview"
+          dashboard_overview_body: "The dashboard is Oroshi's home screen. It provides an overview of your supplier, supply type, buyer, product, and shipping configurations."
+          main_areas: "Main Areas"
+          area_navbar: "Navigation Bar — The main menu across the top of every page"
+          area_tabs: "Settings Tabs — Switch between different configuration sections"
+          area_content: "Content Area — Displays the content of the selected tab"
+          next_steps: "Next Steps"
+          next_steps_body: "Once you're familiar with the dashboard, explore the navigation guide for more details."
+        navigation:
+          title: "Navigation"
+          intro: "Oroshi's navigation is built around a consistent menu bar that appears on every page."
+          navbar_items: "Navigation Items"
+          item_dashboard: "Supply Settings — Dashboard (home screen)"
+          item_supplies: "Supplies — Enter and manage supply data"
+          item_orders: "Orders — Order dashboard (organized by date)"
+          item_search: "Order Search — Advanced search and calendar view"
+          item_payments: "Payments — Payment management (admin and VIP only)"
+          language_toggle: "Language Toggle"
+          language_toggle_body: "Use the flag icons on the right side of the navigation bar to switch between Japanese and English."
+          user_menu: "User Menu"
+          user_menu_body: "Log out or edit your profile using the icons on the right side of the navigation bar."
+        onboarding:
+          title: "Onboarding"
+          intro: "When using Oroshi for the first time, the onboarding wizard guides you through the initial system setup."
+          what_is_onboarding: "What is Onboarding?"
+          what_is_onboarding_body: "Onboarding is a wizard that walks you through the 13 steps needed to set up Oroshi. As you complete each step and register data, the system becomes ready for use."
+          phases: "Four Phases"
+          phase_foundation: "Foundation"
+          phase_foundation_desc: "Company information, supply reception times"
+          phase_supply: "Supply Chain"
+          phase_supply_desc: "Supplier organizations, suppliers, supply types, supply type variations"
+          phase_sales: "Sales"
+          phase_sales_desc: "Buyers, products, product variations"
+          phase_shipping: "Shipping"
+          phase_shipping_desc: "Shipping organizations, shipping methods, receptacles, order categories"
+          checklist: "Checklist"
+          checklist_body: "The checklist dropdown in the navigation bar shows how many steps remain. Once all steps are complete, the checklist automatically disappears."
+          skip_option: "Skip Option"
+          skip_option_body: "If you want to start using the system immediately, click 'Skip for now' to postpone onboarding. You can resume it at any time."
+
+      # =========================================================
+      # Orders Section
+      # =========================================================
+      orders:
+        index:
+          title: "Order Management"
+          intro: "Order management is the core feature of Oroshi. Once configured, most orders can be entered with just 1-2 clicks, and profit calculations and shipping schedules are updated automatically."
+          overview: "Overview"
+          overview_body: "The order dashboard is organized by shipping date. Each order contains buyer, product, shipping method, quantity, and price information, with all costs and profits calculated in real time."
+          workflow_title: "Order Workflow"
+          workflow_intro: "Orders are processed through the following stages."
+          workflow_step_1: "Order Creation"
+          workflow_step_1_desc: "Create a new order specifying the buyer, product, quantity, and shipping method."
+          workflow_step_2: "Production Schedule"
+          workflow_step_2_desc: "Created orders are automatically reflected in the production dashboard."
+          workflow_step_3: "Shipping"
+          workflow_step_3_desc: "When shipping is processed, inventory is automatically deducted."
+          workflow_step_4: "Revenue & Payment"
+          workflow_step_4_desc: "Order revenue is tracked in real time and linked to payment management."
+        creating_orders:
+          title: "Creating Orders"
+          intro: "Oroshi's order creation is designed to be completed with minimal clicks. When all settings are configured, you can add an order in just 1-2 clicks."
+          how_it_works: "How Order Creation Works"
+          step_select_date: "Select the Shipping Date"
+          step_select_date_desc: "Choose the shipping date on the order dashboard. Dates are managed via URL parameters and can be easily switched using the calendar."
+          step_open_form: "Open the Order Form"
+          step_open_form_desc: "Click the 'New Order' button to open the order entry modal."
+          step_select_buyer: "Select the Buyer"
+          step_select_buyer_desc: "When you select a buyer, shipping methods are automatically filtered to show only those available for that buyer."
+          step_select_product: "Select the Product"
+          step_select_product_desc: "When you select a product, available variations (size, quality) are displayed."
+          step_enter_quantities: "Enter Quantities"
+          step_enter_quantities_desc: "Enter the item quantity, receptacle quantity, and freight quantity. Shipping costs and material costs are calculated automatically as you type."
+          step_save: "Save the Order"
+          step_save_desc: "Click save to create the order. It will appear in the dashboard in real time."
+          cascading_fields: "Cascading Fields"
+          cascading_fields_body: "The order form fields are linked together. Selecting a buyer filters the available shipping methods, and selecting a product shows its variations. This prevents input errors and streamlines the workflow."
+          auto_calculation: "Automatic Cost Calculation"
+          auto_calculation_body: "When an order is saved, the following costs are calculated automatically."
+          label_shipping: "Shipping"
+          label_materials: "Materials"
+          label_revenue: "Revenue"
+          label_profit: "Profit"
+          calc_shipping: "Shipping = (Handling Cost + Optional Cost + Per-Receptacle Cost) x Receptacle Qty + Per-Freight Cost x Freight Qty"
+          calc_materials: "Materials = Receptacle Cost + Product Material Cost + Packaging Cost"
+          calc_revenue: "Revenue = Unit Price x Item Quantity"
+          calc_profit: "Profit = Revenue - (Materials + Shipping - Adjustments)"
+          realtime_updates: "Real-time Updates"
+          realtime_updates_body: "When orders are created or modified, all users' dashboards are updated in real time via WebSocket. Multiple staff members can work simultaneously and always see the latest information."
+        order_templates:
+          title: "Order Templates"
+          intro: "If you frequently repeat the same orders, saving them as templates further simplifies future data entry."
+          what_are_templates: "What Are Templates?"
+          what_are_templates_body: "Order templates save commonly used order patterns (buyer, product, shipping method, quantities). Creating an order from a template auto-fills the form with all information — just confirm and save."
+          creating_template: "Creating a Template"
+          creating_template_body: "Enable the 'Save as template' option when creating an order to save it as a template."
+          using_template: "Using a Template"
+          using_template_body: "Select a template from the 'Templates' tab on the order dashboard. The new order form opens with all fields pre-filled. Just verify the date and quantities, then save."
+          managing_templates: "Managing Templates"
+          managing_templates_body: "Unnecessary templates can be deleted from the templates tab. Deleting a template does not affect any existing orders created from it."
+        order_lifecycle:
+          title: "Order Lifecycle"
+          intro: "Orders go through several stages from creation to shipping and payment."
+          stages: "Order Stages"
+          stage_created: "Created"
+          stage_created_desc: "The order has been entered and appears on the production dashboard."
+          stage_shipped: "Shipped"
+          stage_shipped_desc: "Shipping has been processed and inventory has been deducted."
+          stage_paid: "Paid"
+          stage_paid_desc: "Payment has been confirmed and linked to a payment receipt."
+          status_indicators: "Status Indicators"
+          status_indicators_body: "On the order dashboard, each order's status is shown with colors and icons. You can see at a glance whether an order has been shipped, not yet shipped, paid, or not yet paid."
+          inventory_impact: "Inventory Impact"
+          inventory_impact_body: "When an order is marked as shipped, the corresponding product inventory is automatically deducted. A warning is displayed if inventory is insufficient."
+        bundling_orders:
+          title: "Bundling Orders"
+          intro: "Bundle orders to the same buyer on the same shipping date to reduce shipping costs."
+          what_is_bundling: "What is Bundling?"
+          what_is_bundling_body: "Bundling combines multiple orders into a single shipment. When orders are bundled, only one order carries the shipping cost — the rest have their shipping cost set to zero."
+          how_to_bundle: "How to Bundle"
+          how_to_bundle_body: "Select the 'Bundle' option on the order form and specify the parent order. Shipping costs are automatically recalculated."
+          cost_savings: "Cost Savings"
+          cost_savings_body: "Bundling can significantly reduce shipping costs, especially when sending multiple products to the same buyer."
+        searching_orders:
+          title: "Searching Orders"
+          intro: "Use the order search feature to quickly find past orders."
+          search_methods: "Search Methods"
+          method_date: "Date Search — Select by shipping date using the calendar"
+          method_keyword: "Keyword Search — Search by buyer name or product name"
+          method_filter: "Filters — Filter by buyer, product, or status"
+          calendar_view: "Calendar View"
+          calendar_view_body: "The order calendar shows which days have orders at a monthly level. Click a date to jump to that day's order dashboard."
+          advanced_search: "Advanced Search"
+          advanced_search_body: "The advanced search screen lets you combine multiple criteria to find orders. Results are shown in a list, and you can click individual orders to see their details."
+        dashboard_tabs:
+          title: "Dashboard Tabs"
+          intro: "The order dashboard has 7 tabs, each showing order information from a different perspective."
+          tab_orders: "Orders Tab"
+          tab_orders_desc: "Lists all orders for the day. You can create, edit, and delete orders."
+          tab_templates: "Templates Tab"
+          tab_templates_desc: "Shows saved order templates and lets you create new orders from them."
+          tab_supply_usage: "Supply Usage Tab"
+          tab_supply_usage_desc: "Shows the supply quantities used by that day's orders."
+          tab_production: "Production Tab"
+          tab_production_desc: "Displays the production schedule organized by production zone."
+          tab_shipping: "Shipping Tab"
+          tab_shipping_desc: "Shows shipping information grouped by carrier. Generate shipping charts, lists, and slips."
+          tab_sales: "Sales Tab"
+          tab_sales_desc: "Shows sales details broken down by buyer."
+          tab_revenue: "Revenue Tab"
+          tab_revenue_desc: "Summarizes the day's total revenue, costs, and profit."
+
+      # =========================================================
+      # Supply Chain Section
+      # =========================================================
+      supply_chain:
+        index:
+          title: "Supply Chain"
+          intro: "Supply chain management covers everything from supplier registration to daily supply data entry and invoice generation."
+          overview: "Overview"
+          overview_body: "Oroshi's supply chain is managed in a hierarchy: Supplier Organization > Supplier > Supply Type > Supply Type Variation. This hierarchy enables flexible supplier management and accurate cost tracking."
+          data_flow: "Data Flow"
+          flow_supplier_org: "Supplier Organization — Groups of suppliers (e.g., regional cooperatives)"
+          flow_supplier: "Supplier — Individual trading partners"
+          flow_supply_type: "Supply Type — Product categories (e.g., salmon, tuna)"
+          flow_variation: "Supply Type Variation — Detailed variants with per-unit pricing"
+        supply_intake:
+          title: "Supply Intake"
+          intro: "Enter daily supply data to record incoming supplies."
+          daily_workflow: "Daily Workflow"
+          daily_workflow_body: "Supply intake involves selecting a date, specifying the supplier and supply type variation, choosing the reception time, and entering the quantity and unit price."
+          entry_form: "Entry Form"
+          entry_form_body: "The supply entry form shows input fields grouped by supplier organization and reception time. You can enter multiple supply items simultaneously."
+          reception_times: "Reception Times"
+          reception_times_body: "Supply reception times are pre-configured (e.g., morning, afternoon, evening) and are linked to supply data for tracking."
+        suppliers:
+          title: "Supplier Management"
+          intro: "Learn how to register, edit, and manage suppliers."
+          organization_level: "Supplier Organizations"
+          organization_level_body: "Supplier organizations are a grouping unit for multiple suppliers. For example, you can register individual fishermen under a regional fishing cooperative."
+          supplier_details: "Supplier Details"
+          supplier_details_body: "Each supplier can have a name, invoice number, representative name, and address information."
+          managing_suppliers: "Managing Suppliers"
+          managing_suppliers_body: "The supplier list lets you view and edit each supplier's information. Use the active/inactive toggle to hide suppliers you no longer trade with."
+        supply_types:
+          title: "Supply Types"
+          intro: "Configure the product categories and their variations."
+          type_hierarchy: "Supply Type Hierarchy"
+          type_hierarchy_body: "Supply types are managed in two levels. Under a supply type (e.g., Salmon), you register supply type variations (e.g., Sockeye, Silver, King)."
+          creating_types: "Creating Supply Types"
+          creating_types_body: "When creating a supply type, specify the name and display order. Display order can be changed by drag-and-drop."
+          variations: "Setting Up Variations"
+          variations_body: "Each variation has a name, unit price, and unit information. These serve as default values during supply intake entry."
+        supply_check_sheets:
+          title: "Supply Check Sheets"
+          intro: "Supply check sheets are PDF documents listing the supply schedule by supplier and reception time."
+          generating: "Generating Check Sheets"
+          generating_body: "From the supply date page, select a region and reception time to generate a check sheet. The PDF is rendered with Japanese fonts optimized for printing."
+          contents: "Check Sheet Contents"
+          contents_body: "Check sheets include supplier names, supply types, reception times, quantity fields, and price fields. They are used for verification on the factory floor."
+          printing: "Printing"
+          printing_body: "Generated PDFs are displayed in the browser and can be printed directly. The layout is optimized for A4 paper."
+
+      # =========================================================
+      # Production Section
+      # =========================================================
+      production:
+        index:
+          title: "Production"
+          intro: "Production management handles manufacturing schedules based on order data and production request processing."
+          overview: "Overview"
+          overview_body: "When orders are created, they are automatically reflected in the production dashboard. Work is organized by production zone, and progress is tracked through production requests."
+          flow: "Production Flow"
+          flow_step_1: "Check Orders — Review orders on the production tab of the order dashboard"
+          flow_step_2: "Create Production Requests — Convert pending orders to production requests"
+          flow_step_3: "Execute Production — Proceed with manufacturing by zone"
+          flow_step_4: "Ship — After production, process shipping to update inventory"
+        production_zones:
+          title: "Production Zones"
+          intro: "Production zones represent work areas on the factory floor."
+          what_are_zones: "What Are Production Zones?"
+          what_are_zones_body: "Production zones are physical or logical work areas within the factory. For example, you might have a 'Processing Area', 'Packing Area', and 'Refrigeration Area'."
+          configuring: "Configuring Zones"
+          configuring_body: "You can add, edit, and reorder production zones from the admin settings. Each zone has a name."
+          zone_assignment: "Zone Assignment"
+          zone_assignment_body: "Assigning a production zone to a product variation causes orders to be automatically grouped into the appropriate zone."
+        production_requests:
+          title: "Production Requests"
+          intro: "Production requests convert orders into work tasks for the factory floor."
+          creating_requests: "Creating Requests"
+          creating_requests_body: "From the production tab of the order dashboard, convert pending orders to production requests. Specify the target date and product during conversion."
+          tracking: "Progress Tracking"
+          tracking_body: "Track the status of each production request in real time. Processed and unprocessed statuses are shown in a list view."
+          fulfillment: "Fulfillment"
+          fulfillment_body: "When a production request is completed, the corresponding inventory is updated. Partial fulfillment is also supported."
+        factory_floor:
+          title: "Factory Floor Schedule"
+          intro: "The factory floor schedule displays manufacturing work organized by date and zone."
+          views: "View Modes"
+          view_manufacture_date: "Manufacture Date View — Shows 3 days of work based on manufacture date"
+          view_shipping_date: "Shipping Date View — Shows work based on shipping date"
+          view_by_zone: "By Zone View — Groups work by production zone"
+          realtime: "Real-time Updates"
+          realtime_body: "The production dashboard updates in real time via WebSocket. When factory floor staff process shipping, all users' screens are updated instantly."
+
+      # =========================================================
+      # Shipping Section
+      # =========================================================
+      shipping:
+        index:
+          title: "Shipping"
+          intro: "Shipping management covers everything from configuring shipping methods to generating shipping documents."
+          overview: "Overview"
+          overview_body: "Oroshi's shipping is structured as Shipping Organization > Shipping Method > Receptacle. When you specify the shipping method and receptacle during ordering, shipping costs are calculated automatically."
+        shipping_methods:
+          title: "Shipping Methods"
+          intro: "Shipping methods define the carriers and pricing structure used for shipments."
+          structure: "Method Structure"
+          structure_body: "Each shipping method belongs to a shipping organization and has per-receptacle and per-freight costs configured."
+          cost_components: "Cost Components"
+          cost_per_receptacle: "Per-Receptacle Cost — Shipping fee per container (box/case)"
+          cost_per_freight: "Per-Freight Cost — Shipping fee per freight unit (pallet)"
+          cost_departure: "Departure Time — The shipping departure time"
+          configuring: "Configuring Methods"
+          configuring_body: "Add and edit shipping methods from the shipping settings on the dashboard. Associate available shipping methods with each buyer."
+        receptacles:
+          title: "Receptacle Management"
+          intro: "Receptacle management lets you configure the container types and costs used for packaging products."
+          what_are_receptacles: "What Are Receptacles?"
+          what_are_receptacles_body: "Receptacles are the boxes and cases used for shipping. Each receptacle can have a size, cost, and image."
+          per_box_estimate: "Per-Box Quantity Estimate"
+          per_box_estimate_body: "Based on the product variation and receptacle combination, the system can automatically calculate how many items fit in each box. This helps you quickly estimate the number of receptacles needed when entering orders."
+          managing: "Managing Receptacles"
+          managing_body: "The receptacle list lets you view and edit each receptacle's image, size, and cost."
+        shipping_dashboard:
+          title: "Shipping Dashboard"
+          intro: "The shipping dashboard lets you view shipping information for each date in three formats."
+          shipping_chart: "Shipping Chart"
+          shipping_chart_body: "Displays shipping information grouped by carrier in a table format. Shipping quantities and costs per carrier are shown at a glance."
+          shipping_list: "Shipping List"
+          shipping_list_body: "Shows the list of shipping destinations by buyer. Includes each buyer's address and product details."
+          shipping_slips: "Shipping Slips"
+          shipping_slips_body: "Generates individual shipping slips. Each slip includes the buyer name, product name, quantity, and carrier information. Print and attach to packages."
+
+      # =========================================================
+      # Financials Section
+      # =========================================================
+      financials:
+        index:
+          title: "Financials"
+          intro: "Oroshi automatically calculates revenue, costs, and profit from order data, integrating payment management and invoice generation."
+          overview: "Overview"
+          overview_body: "Financial features consist of four main functions: revenue tracking, profit calculation, payment management, and invoice management."
+          money_flow: "Money Flow"
+          flow_revenue: "Revenue — Calculated from order unit price x quantity"
+          flow_expenses: "Expenses — Calculated from materials (receptacle, packaging, product) + shipping"
+          flow_commission: "Commission — Deducted based on buyer commission rate"
+          flow_profit: "Profit — Revenue - Expenses + Adjustments"
+        revenue_tracking:
+          title: "Revenue Tracking"
+          intro: "Track daily revenue in real time from the sales tab of the order dashboard."
+          dashboard: "Revenue Dashboard"
+          dashboard_body: "The revenue dashboard aggregates and displays all order revenue for the day, broken down by buyer."
+          per_buyer: "Per-Buyer Revenue"
+          per_buyer_body: "Click on a buyer to see their order details and revenue total. Net revenue after commission deduction is also shown."
+          daily_summary: "Daily Summary"
+          daily_summary_body: "The revenue tab shows the day's total revenue, total costs, and total profit in a summary view."
+        profit_calculation:
+          title: "Profit Calculation"
+          intro: "Oroshi calculates profit automatically for each order. This page explains the calculation in detail."
+          formula: "Profit Formula"
+          formula_body: "Profit = Revenue - (Material Cost + Shipping Cost - Adjustments)"
+          revenue_detail: "Revenue Calculation"
+          revenue_detail_body: "Revenue = Unit Price x Item Quantity. The unit price is set per product variation but can be overridden on individual orders."
+          shipping_detail: "Shipping Cost Calculation"
+          shipping_detail_body: "Shipping = (Buyer Handling Cost + Buyer Optional Cost + Method Per-Receptacle Cost) x Receptacle Qty + Method Per-Freight Cost x Freight Qty"
+          materials_detail: "Material Cost Calculation"
+          materials_detail_body: "Material cost is the sum of all materials linked to a product. The calculation method varies by billing type (per item, per box, per freight, per supply unit)."
+          adjustments: "Adjustments"
+          adjustments_body: "Adjustments added through payment management (discounts, surcharges, returns, etc.) are reflected in the profit calculation."
+        payment_receipts:
+          title: "Payment Receipts"
+          intro: "Payment management records payments from buyers and links them to orders."
+          quick_entry: "Quick Entry"
+          quick_entry_body: "The quick entry screen lists all buyers with outstanding (unpaid) orders. Click a buyer to see their unpaid orders, enter the payment amount and date, and the payment record is created."
+          single_entry: "Single Entry"
+          single_entry_body: "The single entry screen lets you manually enter the buyer and payment amount to create a payment record. You can also add adjustment lines for discounts or additional charges."
+          adjustments: "Adjustment Items"
+          adjustments_body: "Payment receipts can include adjustment lines. Select a pre-configured adjustment type (discount, shipping correction, return, etc.) and enter the amount."
+          search: "Payment Search"
+          search_body: "The payment search screen lets you search payment records by buyer name or date."
+        invoices:
+          title: "Invoice Management"
+          intro: "Create and manage invoices to suppliers, and send them by email."
+          creating: "Creating Invoices"
+          creating_body: "Create invoices from the supply date page. Select the target supply dates and the supply data is automatically aggregated."
+          layouts: "Invoice Layouts"
+          layout_standard: "Standard Layout — Invoice with detailed supply item breakdown"
+          layout_simple: "Simple Layout — Invoice with total amounts only"
+          sending: "Sending Invoices"
+          sending_body: "Invoices can be sent to suppliers as PDF email attachments. Sending is processed as a background job, so you don't need to wait."
+          tracking: "Invoice Tracking"
+          tracking_body: "The invoice list shows the creation date, amount, and send status for each invoice."
+        materials_costs:
+          title: "Materials & Costs"
+          intro: "Materials management lets you configure the cost components of your products in detail."
+          what_are_materials: "What Are Materials?"
+          what_are_materials_body: "Materials are the cost elements that make up a product's cost. You can register various types of costs: receptacles, packaging, processing fees, shipping-related fees, and more."
+          billing_types: "Billing Types"
+          type_per_item: "Per Item — Calculated based on item quantity (e.g., labels)"
+          type_per_box: "Per Box — Calculated based on receptacle quantity (e.g., packaging materials)"
+          type_per_freight: "Per Freight — Calculated based on freight quantity (e.g., pallet fees)"
+          type_per_supply: "Per Supply Unit — Calculated based on supply quantity (e.g., processing fees)"
+          categories: "Material Categories"
+          categories_body: "Materials can be organized by category. Using categories makes the material list easier to browse."
+          product_association: "Product Association"
+          product_association_body: "On the product edit screen, select the materials used for that product. Material costs are automatically reflected in order profit calculations."
+
+      # =========================================================
+      # Admin Section
+      # =========================================================
+      admin:
+        index:
+          title: "Administration"
+          intro: "Administration settings configure the core system-wide settings for Oroshi. These settings directly affect how orders and shipping work."
+          overview: "Overview"
+          overview_body: "Administrators can manage the following settings. All settings are accessible from the dashboard."
+          settings_list: "Settings"
+          setting_company: "Company Setup — Company name, address, and contact info"
+          setting_buyers: "Buyer Management — Buyer registration, cost settings, commission"
+          setting_products: "Product Management — Products and variation configuration"
+          setting_users: "User Management — User roles and access permissions"
+        company_setup:
+          title: "Company Setup"
+          intro: "Set up your company's basic information. This information is used on invoices and PDF documents."
+          fields: "Settings"
+          field_name: "Company Name — Displayed on invoices and documents"
+          field_postal: "Postal Code — Company postal code"
+          field_address: "Address — Company address"
+          field_phone: "Phone — Contact phone number"
+          field_fax: "Fax — Fax number"
+          field_email: "Email — Contact email address"
+          field_web: "Website — Company website URL"
+          field_invoice: "Invoice Number — Qualified invoice issuer registration number"
+          saving: "Saving Settings"
+          saving_body: "After making changes, click the save button to confirm. Changes take effect immediately."
+        buyer_management:
+          title: "Buyer Management"
+          intro: "Learn how to register and manage buyers (wholesale customers)."
+          creating_buyers: "Creating Buyers"
+          creating_buyers_body: "Create new buyers from the buyers tab on the dashboard. Set the name, color code, and entity type (wholesale market, restaurant, etc.)."
+          cost_settings: "Cost Settings"
+          handling_cost: "Handling Cost — Cost per bundle (administrative fees, etc.)"
+          optional_cost: "Optional Cost — Additional cost (special handling fees, etc.)"
+          commission: "Commission Rate — Percentage deducted from revenue as commission"
+          shipping_association: "Shipping Method Association"
+          shipping_association_body: "Set the available shipping methods for each buyer. When creating an order and selecting a buyer, only the associated shipping methods are displayed."
+          color_coding: "Color Coding"
+          color_coding_body: "Setting a color code for each buyer makes orders on the dashboard visually distinguishable by buyer, using color-coded indicators."
+        product_management:
+          title: "Product Management"
+          intro: "Learn how to configure products and their variations."
+          product_hierarchy: "Product Hierarchy"
+          product_hierarchy_body: "Products are managed in two levels. Under a product (e.g., Salmon Sashimi), you register product variations (e.g., 100g, 200g, 500g)."
+          creating_products: "Creating Products"
+          creating_products_body: "Create new products from the products tab on the dashboard. Specify the name, display order, and materials used."
+          variations: "Setting Up Variations"
+          variations_body: "Each variation has a name, unit price, packaging, shelf life, and dimensions. Images can also be uploaded for each variation."
+          material_costs: "Viewing Costs"
+          material_costs_body: "On the product detail screen, view the cost breakdown by material. Changes to material settings are immediately reflected in cost calculations."
+          positioning: "Display Order"
+          positioning_body: "The display order of products and product variations can be freely changed by drag-and-drop."
+        user_management:
+          title: "User Management"
+          intro: "Manage user roles and access permissions."
+          roles: "User Roles"
+          role_admin: "Admin — Full access to all features. Can change system settings and manage users."
+          role_vip: "VIP — Access to most features, including payment management."
+          role_employee: "Employee — Access to features needed for daily operations: supply intake, order management, etc."
+          role_supplier: "Supplier — Can only view supply data related to their own organization."
+          role_user: "User — Basic viewing permissions only."
+          approval: "User Approval"
+          approval_body: "New users require admin approval after registration. Unapproved users have restricted access."
+          profile: "Profile"
+          profile_body: "Users can edit their own profile (email, username, password) by clicking the person icon in the navigation bar."
diff --git a/config/locales/documentation.ja.yml b/config/locales/documentation.ja.yml
new file mode 100644
index 0000000..dd5b607
--- /dev/null
+++ b/config/locales/documentation.ja.yml
@@ -0,0 +1,527 @@
+ja:
+  oroshi:
+    documentation:
+      chrome:
+        title: "Oroshi ドキュメント"
+        home: "ホーム"
+        overview: "ドキュメント一覧"
+        search_placeholder: "ドキュメントを検索..."
+        see_also: "関連ページ"
+        help_tooltip: "ヘルプを見る"
+      messages:
+        invalid_section: "指定されたセクションが見つかりません。"
+        invalid_page: "指定されたページが見つかりません。"
+      index:
+        title: "Oroshi ドキュメント"
+        subtitle: "卸売注文管理システムの使い方ガイド"
+      sections:
+        getting_started: "はじめに"
+        orders: "注文管理"
+        supply_chain: "仕入れ管理"
+        production: "製造管理"
+        shipping: "出荷管理"
+        financials: "売上・経理"
+        admin: "管理設定"
+      section_descriptions:
+        getting_started: "ログインからナビゲーション、初期設定まで、Oroshiの基本操作を学びます。"
+        orders: "注文の作成、テンプレート活用、ライフサイクル管理など、注文業務の中心機能を解説します。"
+        supply_chain: "仕入れの入力、仕入先の管理、仕入種類の設定など、サプライチェーン全体を管理します。"
+        production: "製造ゾーンの設定、製造依頼の作成、工場フロアのスケジュール管理を行います。"
+        shipping: "配送方法の設定、容器の管理、出荷ダッシュボードの使い方を説明します。"
+        financials: "売上の追跡、利益計算の仕組み、入金管理、請求書の作成を行います。"
+        admin: "会社情報、卸先、商品、ユーザーなどのシステム全体の設定を管理します。"
+      pages:
+        getting_started:
+          first_login: "初回ログイン"
+          navigation: "ナビゲーション"
+          onboarding: "オンボーディング"
+        orders:
+          creating_orders: "注文の作成"
+          order_templates: "注文テンプレート"
+          order_lifecycle: "注文のライフサイクル"
+          bundling_orders: "注文のまとめ出荷"
+          searching_orders: "注文の検索"
+          dashboard_tabs: "ダッシュボードタブ"
+        supply_chain:
+          supply_intake: "仕入れ入力"
+          suppliers: "仕入先の管理"
+          supply_types: "仕入種類"
+          supply_check_sheets: "仕入チェックシート"
+        production:
+          production_zones: "製造ゾーン"
+          production_requests: "製造依頼"
+          factory_floor: "工場フロアスケジュール"
+        shipping:
+          shipping_methods: "配送方法"
+          receptacles: "容器管理"
+          shipping_dashboard: "出荷ダッシュボード"
+        financials:
+          revenue_tracking: "売上追跡"
+          profit_calculation: "利益計算"
+          payment_receipts: "入金管理"
+          invoices: "請求書管理"
+          materials_costs: "原価管理"
+        admin:
+          company_setup: "会社設定"
+          buyer_management: "卸先管理"
+          product_management: "商品管理"
+          user_management: "ユーザー管理"
+
+      # =========================================================
+      # Getting Started Section
+      # =========================================================
+      getting_started:
+        index:
+          title: "はじめに"
+          intro: "Oroshiは卸売注文管理システムです。仕入れから注文、出荷、入金まで、卸売業務の全工程を一元管理できます。"
+          what_is_oroshi: "Oroshiとは"
+          what_is_oroshi_body: "Oroshiは、卸売業者向けの注文管理システムです。設定が完了すれば、注文は1〜2クリックで入力でき、工場フロアのスケジュール、利益追跡、入金管理が自動的に更新されます。"
+          key_features: "主な機能"
+          feature_orders: "注文管理 — 作成・編集・テンプレート化・まとめ出荷"
+          feature_supply: "仕入れ管理 — 仕入先・仕入種類・チェックシート"
+          feature_production: "製造管理 — ゾーン別スケジュール・製造依頼"
+          feature_shipping: "出荷管理 — 配送方法・容器・出荷伝票"
+          feature_financials: "売上・経理 — 売上追跡・利益計算・入金・請求書"
+          feature_admin: "管理設定 — 会社情報・卸先・商品・ユーザー"
+          quick_start: "クイックスタート"
+          quick_start_body: "初めてOroshiを使う場合は、以下の順序でセットアップを進めてください。"
+          step_1: "会社情報を設定する"
+          step_1_desc: "会社名、住所、連絡先を登録します。"
+          step_2: "仕入先と仕入種類を登録する"
+          step_2_desc: "取引先の仕入先と取り扱い品目を設定します。"
+          step_3: "卸先を登録する"
+          step_3_desc: "卸先の市場やレストランを登録します。"
+          step_4: "商品を設定する"
+          step_4_desc: "商品とそのバリエーション（サイズ・品質）を作成します。"
+          step_5: "配送方法と容器を設定する"
+          step_5_desc: "配送業者、配送方法、梱包容器を登録します。"
+          step_6: "注文の入力を開始する"
+          step_6_desc: "すべての設定が完了したら、注文管理ページから注文を入力できます。"
+        first_login:
+          title: "初回ログイン"
+          intro: "Oroshiに初めてログインすると、ダッシュボードが表示されます。ここでは初回ログイン時の画面構成と基本操作を説明します。"
+          dashboard_overview: "ダッシュボードの概要"
+          dashboard_overview_body: "ダッシュボードは、Oroshiのホーム画面です。仕入先・仕入種類・卸先・商品・配送などの設定状況を一覧で確認できます。"
+          main_areas: "主なエリア"
+          area_navbar: "ナビゲーションバー — サイト全体のメインメニュー"
+          area_tabs: "設定タブ — 各管理項目への切り替え"
+          area_content: "コンテンツエリア — 選択したタブの内容を表示"
+          next_steps: "次のステップ"
+          next_steps_body: "ダッシュボードの使い方がわかったら、ナビゲーションの詳細を確認しましょう。"
+        navigation:
+          title: "ナビゲーション"
+          intro: "Oroshiのナビゲーションは、すべてのページに共通するメニューバーで構成されています。"
+          navbar_items: "ナビゲーション項目"
+          item_dashboard: "卸設定 — ダッシュボード（ホーム画面）"
+          item_supplies: "仕入れ — 仕入データの入力・管理"
+          item_orders: "注文 — 注文ダッシュボード（日付別）"
+          item_search: "注文検索 — 詳細検索・カレンダー表示"
+          item_payments: "入金 — 入金管理（管理者・VIPのみ）"
+          language_toggle: "言語切り替え"
+          language_toggle_body: "ナビゲーションバーの右端にある国旗アイコンで、日本語と英語を切り替えることができます。"
+          user_menu: "ユーザーメニュー"
+          user_menu_body: "ログアウトやプロフィール編集は、ナビゲーションバー右端のアイコンから行えます。"
+        onboarding:
+          title: "オンボーディング"
+          intro: "初めてOroshiを使う場合、オンボーディングウィザードがシステムの初期設定をガイドします。"
+          what_is_onboarding: "オンボーディングとは"
+          what_is_onboarding_body: "オンボーディングは、Oroshiを使い始めるために必要な13のステップを順に案内するウィザードです。各ステップでデータを登録していくと、システムが利用可能な状態になります。"
+          phases: "4つのフェーズ"
+          phase_foundation: "基盤設定"
+          phase_foundation_desc: "会社情報、仕入受付時間"
+          phase_supply: "仕入れ設定"
+          phase_supply_desc: "仕入先組織、仕入先、仕入種類、仕入種類バリエーション"
+          phase_sales: "販売設定"
+          phase_sales_desc: "卸先、商品、商品バリエーション"
+          phase_shipping: "出荷設定"
+          phase_shipping_desc: "出荷組織、配送方法、容器、注文カテゴリ"
+          checklist: "チェックリスト"
+          checklist_body: "ナビゲーションバーに表示されるチェックリストドロップダウンで、残りのステップ数を確認できます。すべてのステップが完了すると、チェックリストは自動的に非表示になります。"
+          skip_option: "スキップオプション"
+          skip_option_body: "すぐにシステムを使いたい場合は、「今はスキップ」をクリックしてオンボーディングを後回しにできます。後からいつでも再開できます。"
+
+      # =========================================================
+      # Orders Section
+      # =========================================================
+      orders:
+        index:
+          title: "注文管理"
+          intro: "注文管理はOroshiの中心機能です。設定が完了すれば、ほとんどの注文を1〜2クリックで入力でき、利益計算や出荷スケジュールが自動的に更新されます。"
+          overview: "概要"
+          overview_body: "注文ダッシュボードは出荷日ごとにグループ化されています。各注文には卸先、商品、配送方法、数量、価格情報が含まれ、すべてのコストと利益がリアルタイムで計算されます。"
+          workflow_title: "注文のワークフロー"
+          workflow_intro: "注文は以下の流れで処理されます。"
+          workflow_step_1: "注文の作成"
+          workflow_step_1_desc: "新規注文を作成し、卸先・商品・数量・配送方法を指定します。"
+          workflow_step_2: "製造スケジュールへの反映"
+          workflow_step_2_desc: "注文が作成されると、製造ダッシュボードに自動的に反映されます。"
+          workflow_step_3: "出荷処理"
+          workflow_step_3_desc: "出荷処理を行うと、在庫が自動的に減算されます。"
+          workflow_step_4: "売上・入金管理"
+          workflow_step_4_desc: "注文の売上はリアルタイムで追跡され、入金管理と連携します。"
+        creating_orders:
+          title: "注文の作成"
+          intro: "Oroshiの注文作成は、最小限のクリックで完了できるよう設計されています。すべての設定が完了していれば、1〜2クリックで注文を追加できます。"
+          how_it_works: "注文作成の流れ"
+          step_select_date: "出荷日の選択"
+          step_select_date_desc: "注文ダッシュボードで出荷日を選択します。日付はURLパラメータで管理されており、カレンダーで簡単に切り替えられます。"
+          step_open_form: "注文フォームを開く"
+          step_open_form_desc: "「新規注文」ボタンをクリックすると、注文入力モーダルが表示されます。"
+          step_select_buyer: "卸先の選択"
+          step_select_buyer_desc: "卸先を選択すると、その卸先に紐づく配送方法が自動的にフィルタリングされます。"
+          step_select_product: "商品の選択"
+          step_select_product_desc: "商品を選択すると、利用可能なバリエーション（サイズ・品質）が表示されます。"
+          step_enter_quantities: "数量の入力"
+          step_enter_quantities_desc: "商品数量、容器数量、貨物数量を入力します。入力と同時に配送費と原価が自動計算されます。"
+          step_save: "注文の保存"
+          step_save_desc: "保存ボタンをクリックすると、注文が作成され、ダッシュボードにリアルタイムで反映されます。"
+          cascading_fields: "連動フィールド"
+          cascading_fields_body: "注文フォームの各フィールドは連動しています。卸先を選択すると配送方法が絞り込まれ、商品を選択するとバリエーションが表示されます。これにより、入力ミスを防ぎ、作業を効率化します。"
+          auto_calculation: "自動コスト計算"
+          auto_calculation_body: "注文が保存されると、以下のコストが自動的に計算されます。"
+          label_shipping: "配送費"
+          label_materials: "原価"
+          label_revenue: "売上"
+          label_profit: "利益"
+          calc_shipping: "配送費 = （取扱コスト + オプションコスト + 1箱あたりコスト） × 容器数 + 1貨物あたりコスト × 貨物数"
+          calc_materials: "原価 = 容器コスト + 商品原価 + 梱包資材コスト"
+          calc_revenue: "売上 = 単価 × 商品数量"
+          calc_profit: "利益 = 売上 − （原価 + 配送費 − 調整額）"
+          realtime_updates: "リアルタイム更新"
+          realtime_updates_body: "注文が作成・変更されると、WebSocketを通じて全てのユーザーのダッシュボードにリアルタイムで反映されます。複数のスタッフが同時に作業しても、常に最新の情報が表示されます。"
+        order_templates:
+          title: "注文テンプレート"
+          intro: "頻繁に同じ注文を繰り返す場合、テンプレートとして保存することで、次回以降の入力をさらに簡略化できます。"
+          what_are_templates: "テンプレートとは"
+          what_are_templates_body: "注文テンプレートは、よく使う注文パターン（卸先・商品・配送方法・数量）を保存したものです。テンプレートから注文を作成すると、フォームにすべての情報が自動入力され、確認して保存するだけで注文が完了します。"
+          creating_template: "テンプレートの作成"
+          creating_template_body: "注文作成時に「テンプレートとして保存」トグルをオンにすると、その注文がテンプレートとして保存されます。"
+          using_template: "テンプレートの使用"
+          using_template_body: "注文ダッシュボードの「テンプレート」タブからテンプレートを選択すると、そのテンプレートの内容で新規注文フォームが開きます。日付と数量を確認して保存するだけで完了です。"
+          managing_templates: "テンプレートの管理"
+          managing_templates_body: "不要になったテンプレートは、テンプレートタブから削除できます。テンプレートを削除しても、そのテンプレートから作成された既存の注文には影響しません。"
+        order_lifecycle:
+          title: "注文のライフサイクル"
+          intro: "注文は作成から出荷、入金まで、いくつかの段階を経て処理されます。"
+          stages: "注文の段階"
+          stage_created: "作成済み"
+          stage_created_desc: "注文が入力されました。製造ダッシュボードに表示されます。"
+          stage_shipped: "出荷済み"
+          stage_shipped_desc: "出荷処理が完了し、在庫が減算されました。"
+          stage_paid: "入金済み"
+          stage_paid_desc: "入金が確認され、入金伝票に紐づけられました。"
+          status_indicators: "ステータス表示"
+          status_indicators_body: "注文ダッシュボードでは、各注文のステータスが色やアイコンで表示されます。出荷済み・未出荷、入金済み・未入金の状態がひと目でわかります。"
+          inventory_impact: "在庫への影響"
+          inventory_impact_body: "注文が出荷処理されると、該当する商品の在庫（商品在庫）から自動的に数量が減算されます。在庫不足の場合は警告が表示されます。"
+        bundling_orders:
+          title: "注文のまとめ出荷"
+          intro: "同じ卸先・同じ出荷日の注文をまとめて出荷することで、配送コストを削減できます。"
+          what_is_bundling: "まとめ出荷とは"
+          what_is_bundling_body: "まとめ出荷は、複数の注文を1つの配送にまとめる機能です。まとめ出荷された注文は、1つの注文のみが配送費を負担し、他の注文の配送費はゼロになります。"
+          how_to_bundle: "まとめ出荷の方法"
+          how_to_bundle_body: "注文フォームで「まとめ出荷」オプションを選択し、まとめ先の注文を指定します。配送費は自動的に再計算されます。"
+          cost_savings: "コスト削減効果"
+          cost_savings_body: "まとめ出荷を利用することで、配送費を大幅に削減できます。特に同じ卸先に複数の商品を出荷する場合に効果的です。"
+        searching_orders:
+          title: "注文の検索"
+          intro: "注文検索機能を使って、過去の注文を素早く見つけることができます。"
+          search_methods: "検索方法"
+          method_date: "日付検索 — 出荷日でカレンダーから選択"
+          method_keyword: "キーワード検索 — 卸先名や商品名で検索"
+          method_filter: "フィルター — 卸先、商品、ステータスで絞り込み"
+          calendar_view: "カレンダー表示"
+          calendar_view_body: "注文カレンダーでは、月単位で注文のある日を視覚的に確認できます。日付をクリックすると、その日の注文ダッシュボードに移動します。"
+          advanced_search: "詳細検索"
+          advanced_search_body: "詳細検索画面では、複数の条件を組み合わせて注文を検索できます。検索結果はリストで表示され、個別の注文をクリックして詳細を確認できます。"
+        dashboard_tabs:
+          title: "ダッシュボードタブ"
+          intro: "注文ダッシュボードには7つのタブがあり、それぞれ異なる視点で注文情報を表示します。"
+          tab_orders: "注文タブ"
+          tab_orders_desc: "その日の全注文を一覧表示します。注文の作成・編集・削除が行えます。"
+          tab_templates: "テンプレートタブ"
+          tab_templates_desc: "保存済みの注文テンプレートを表示し、テンプレートから新規注文を作成できます。"
+          tab_supply_usage: "仕入使用量タブ"
+          tab_supply_usage_desc: "その日の注文に使用される仕入品の量を表示します。"
+          tab_production: "製造タブ"
+          tab_production_desc: "製造ゾーン別の製造スケジュールを表示します。"
+          tab_shipping: "出荷タブ"
+          tab_shipping_desc: "配送業者別の出荷情報を表示します。出荷チャート、出荷リスト、出荷伝票を生成できます。"
+          tab_sales: "売上タブ"
+          tab_sales_desc: "卸先別の売上明細を表示します。"
+          tab_revenue: "売上合計タブ"
+          tab_revenue_desc: "その日の売上合計、原価、利益をまとめて表示します。"
+
+      # =========================================================
+      # Supply Chain Section
+      # =========================================================
+      supply_chain:
+        index:
+          title: "仕入れ管理"
+          intro: "仕入れ管理では、仕入先の登録から日々の仕入データの入力、チェックシートの生成までを管理します。"
+          overview: "概要"
+          overview_body: "Oroshiの仕入れ管理は、仕入先組織 → 仕入先 → 仕入種類 → 仕入種類バリエーションの階層構造で管理されます。この階層により、柔軟な仕入先管理と正確なコスト追跡が可能です。"
+          data_flow: "データの流れ"
+          flow_supplier_org: "仕入先組織 — 仕入先のグループ（例：地域の漁協）"
+          flow_supplier: "仕入先 — 個別の取引先"
+          flow_supply_type: "仕入種類 — 取り扱い品目（例：鮭、マグロ）"
+          flow_variation: "仕入種類バリエーション — 品目の詳細（サイズ・品質ごとの単価）"
+        supply_intake:
+          title: "仕入れ入力"
+          intro: "毎日の仕入データを入力して、仕入状況を記録します。"
+          daily_workflow: "日次ワークフロー"
+          daily_workflow_body: "仕入れ入力は、日付を選択し、仕入先と仕入種類バリエーション、受付時間帯を指定して数量と単価を入力します。"
+          entry_form: "入力フォーム"
+          entry_form_body: "仕入れ入力フォームでは、仕入先組織と受付時間帯ごとにグループ化された入力欄が表示されます。複数の仕入品目を同時に入力できます。"
+          reception_times: "受付時間帯"
+          reception_times_body: "仕入の受付時間帯は事前に設定されており（例：朝・昼・夕）、仕入データと紐づけて管理されます。"
+        suppliers:
+          title: "仕入先の管理"
+          intro: "仕入先の登録・編集・管理方法を説明します。"
+          organization_level: "仕入先組織"
+          organization_level_body: "仕入先組織は、複数の仕入先をグループ化するための単位です。例えば、地域の漁業協同組合の下に個別の漁師を登録できます。"
+          supplier_details: "仕入先の詳細"
+          supplier_details_body: "各仕入先には、名前、請求番号、代表者名、住所などの情報を登録できます。"
+          managing_suppliers: "仕入先の管理"
+          managing_suppliers_body: "仕入先一覧では、各仕入先の情報を確認・編集できます。アクティブ/非アクティブの切り替えで、取引終了した仕入先を非表示にできます。"
+        supply_types:
+          title: "仕入種類"
+          intro: "取り扱い品目とそのバリエーションを設定します。"
+          type_hierarchy: "仕入種類の階層"
+          type_hierarchy_body: "仕入種類は2階層で管理されます。仕入種類（例：鮭）の下に、仕入種類バリエーション（例：紅鮭・銀鮭・キングサーモン）を登録します。"
+          creating_types: "仕入種類の作成"
+          creating_types_body: "仕入種類を作成する際は、名前と表示順を指定します。表示順はドラッグ＆ドロップで変更できます。"
+          variations: "バリエーションの設定"
+          variations_body: "各バリエーションには、名前、単価、単位などの情報を設定します。これらの情報は仕入れ入力時のデフォルト値として使用されます。"
+        supply_check_sheets:
+          title: "仕入チェックシート"
+          intro: "仕入チェックシートは、仕入先ごと・受付時間帯ごとの仕入予定を一覧にしたPDFドキュメントです。"
+          generating: "チェックシートの生成"
+          generating_body: "仕入日ページから、地域と受付時間帯を選択してチェックシートを生成できます。PDFは日本語フォントで印刷に最適化されています。"
+          contents: "チェックシートの内容"
+          contents_body: "チェックシートには、仕入先名、仕入種類、受付時間、数量記入欄、価格記入欄が含まれます。工場フロアでの確認作業に使用します。"
+          printing: "印刷"
+          printing_body: "生成されたPDFはブラウザで表示されるため、そのまま印刷できます。A4用紙に最適化されたレイアウトです。"
+
+      # =========================================================
+      # Production Section
+      # =========================================================
+      production:
+        index:
+          title: "製造管理"
+          intro: "製造管理では、注文データを元にした製造スケジュールの管理と、製造依頼の処理を行います。"
+          overview: "概要"
+          overview_body: "注文が作成されると、製造ダッシュボードに自動的に反映されます。製造ゾーンごとに作業を整理し、製造依頼を通じて進捗を管理します。"
+          flow: "製造の流れ"
+          flow_step_1: "注文の確認 — 注文ダッシュボードの製造タブで確認"
+          flow_step_2: "製造依頼の作成 — 未処理の注文を製造依頼に変換"
+          flow_step_3: "製造の実行 — ゾーンごとに製造を進行"
+          flow_step_4: "出荷処理 — 製造完了後、出荷処理で在庫を更新"
+        production_zones:
+          title: "製造ゾーン"
+          intro: "製造ゾーンは、工場フロアの作業エリアを表します。"
+          what_are_zones: "製造ゾーンとは"
+          what_are_zones_body: "製造ゾーンは、工場内の物理的または論理的な作業区域です。例えば、「加工エリア」「梱包エリア」「冷蔵エリア」などに分けて管理できます。"
+          configuring: "ゾーンの設定"
+          configuring_body: "管理画面から製造ゾーンの追加・編集・並び替えが行えます。各ゾーンには名前を設定します。"
+          zone_assignment: "ゾーンの割り当て"
+          zone_assignment_body: "商品バリエーションに製造ゾーンを割り当てることで、注文が自動的に適切なゾーンにグループ化されます。"
+        production_requests:
+          title: "製造依頼"
+          intro: "製造依頼は、注文を工場フロアの作業タスクに変換する仕組みです。"
+          creating_requests: "製造依頼の作成"
+          creating_requests_body: "注文ダッシュボードの製造タブから、未処理の注文を製造依頼に変換できます。変換時に対象の日付と商品を指定します。"
+          tracking: "進捗管理"
+          tracking_body: "各製造依頼の処理状況をリアルタイムで追跡できます。処理済み・未処理のステータスが一覧で表示されます。"
+          fulfillment: "履行処理"
+          fulfillment_body: "製造依頼が完了すると、対応する在庫が更新されます。部分的な履行にも対応しています。"
+        factory_floor:
+          title: "工場フロアスケジュール"
+          intro: "工場フロアスケジュールは、製造作業を日付とゾーンで整理して表示する画面です。"
+          views: "表示モード"
+          view_manufacture_date: "製造日表示 — 製造日を基準に3日間の作業を表示"
+          view_shipping_date: "出荷日表示 — 出荷日を基準に作業を表示"
+          view_by_zone: "ゾーン別表示 — 製造ゾーンごとに作業をグループ化"
+          realtime: "リアルタイム更新"
+          realtime_body: "製造ダッシュボードはWebSocketを使用してリアルタイムで更新されます。工場フロアのスタッフが出荷処理を行うと、すべてのユーザーの画面に即座に反映されます。"
+
+      # =========================================================
+      # Shipping Section
+      # =========================================================
+      shipping:
+        index:
+          title: "出荷管理"
+          intro: "出荷管理では、配送方法の設定から出荷ドキュメントの生成まで、出荷業務全体を管理します。"
+          overview: "概要"
+          overview_body: "Oroshiの出荷管理は、出荷組織 → 配送方法 → 容器の階層で構成されています。注文時に配送方法と容器を指定すると、配送費が自動計算されます。"
+        shipping_methods:
+          title: "配送方法"
+          intro: "配送方法は、出荷に使用する配送業者と料金体系を定義します。"
+          structure: "配送方法の構成"
+          structure_body: "各配送方法は出荷組織に属し、1箱あたりのコストと1貨物あたりのコストが設定されています。"
+          cost_components: "コスト構成"
+          cost_per_receptacle: "1箱あたりコスト — 容器1つあたりの配送料"
+          cost_per_freight: "1貨物あたりコスト — 貨物（パレット）1つあたりの配送料"
+          cost_departure: "出発時刻 — 配送の出発時間"
+          configuring: "配送方法の設定"
+          configuring_body: "ダッシュボードの出荷設定から、配送方法の追加・編集が行えます。卸先ごとに利用可能な配送方法を紐づけます。"
+        receptacles:
+          title: "容器管理"
+          intro: "容器（箱・ケース）は、商品の梱包に使用する容器の種類とコストを管理します。"
+          what_are_receptacles: "容器とは"
+          what_are_receptacles_body: "容器は出荷に使用する箱やケースのことです。各容器にはサイズ、コスト、画像を登録できます。"
+          per_box_estimate: "1箱あたり数量の見積もり"
+          per_box_estimate_body: "商品バリエーションと容器の組み合わせに基づいて、1箱あたりの収容数量を自動計算できます。これにより、注文入力時に必要な容器数を素早く見積もれます。"
+          managing: "容器の管理"
+          managing_body: "容器一覧では、各容器の画像・サイズ・コストを確認・編集できます。"
+        shipping_dashboard:
+          title: "出荷ダッシュボード"
+          intro: "出荷ダッシュボードでは、日付ごとの出荷情報を3つの形式で確認できます。"
+          shipping_chart: "出荷チャート"
+          shipping_chart_body: "配送業者別にグループ化された出荷情報を表形式で表示します。配送業者ごとの出荷数量とコストが一目でわかります。"
+          shipping_list: "出荷リスト"
+          shipping_list_body: "卸先別の出荷先一覧を表示します。各卸先の住所と出荷商品の詳細が含まれます。"
+          shipping_slips: "出荷伝票"
+          shipping_slips_body: "個別の出荷伝票を生成します。各伝票には卸先名、商品名、数量、配送業者情報が含まれます。印刷して荷物に貼付できます。"
+
+      # =========================================================
+      # Financials Section
+      # =========================================================
+      financials:
+        index:
+          title: "売上・経理"
+          intro: "Oroshiは注文データから売上、原価、利益を自動計算し、入金管理と請求書発行を統合的に管理します。"
+          overview: "概要"
+          overview_body: "売上・経理機能は、売上追跡、利益計算、入金管理、請求書管理の4つの主要機能で構成されています。"
+          money_flow: "お金の流れ"
+          flow_revenue: "売上 — 注文の単価 × 数量から算出"
+          flow_expenses: "経費 — 原価（容器・梱包・商品）+ 配送費から算出"
+          flow_commission: "手数料 — 卸先の手数料率に基づいて控除"
+          flow_profit: "利益 — 売上 − 経費 + 調整額"
+        revenue_tracking:
+          title: "売上追跡"
+          intro: "注文ダッシュボードの売上タブで、日次の売上状況をリアルタイムに確認できます。"
+          dashboard: "売上ダッシュボード"
+          dashboard_body: "売上ダッシュボードでは、その日の全注文の売上を卸先別に集計して表示します。"
+          per_buyer: "卸先別の売上"
+          per_buyer_body: "各卸先をクリックすると、その卸先の注文明細と売上合計が表示されます。手数料控除後の実収入も確認できます。"
+          daily_summary: "日次サマリー"
+          daily_summary_body: "売上合計タブでは、その日の総売上、総原価、総利益をまとめて表示します。"
+        profit_calculation:
+          title: "利益計算"
+          intro: "Oroshiは注文ごとに利益を自動計算します。ここでは計算の仕組みを詳しく説明します。"
+          formula: "利益計算の公式"
+          formula_body: "利益 = 売上 − （原価 + 配送費 − 調整額）"
+          revenue_detail: "売上の計算"
+          revenue_detail_body: "売上 = 単価 × 商品数量。単価は商品バリエーションごとに設定されますが、注文ごとに変更することも可能です。"
+          shipping_detail: "配送費の計算"
+          shipping_detail_body: "配送費 = （卸先取扱コスト + 卸先オプションコスト + 配送方法の1箱あたりコスト） × 容器数量 + 配送方法の1貨物あたりコスト × 貨物数量"
+          materials_detail: "原価の計算"
+          materials_detail_body: "原価は商品に紐づく材料の合計です。材料の課金タイプ（1個あたり・1箱あたり・1貨物あたり・仕入単位あたり）に応じて計算方法が異なります。"
+          adjustments: "調整額"
+          adjustments_body: "入金管理で追加できる調整額（値引き、追加費用、返品など）は、利益に反映されます。"
+        payment_receipts:
+          title: "入金管理"
+          intro: "入金管理では、卸先からの入金を記録し、注文と紐づけて管理します。"
+          quick_entry: "クイック入力"
+          quick_entry_body: "クイック入力画面では、未入金の注文がある卸先が一覧表示されます。卸先をクリックすると、その卸先の未入金注文が表示され、入金額と入金日を入力するだけで入金記録を作成できます。"
+          single_entry: "個別入力"
+          single_entry_body: "個別入力画面では、卸先と入金額を手動で入力して入金記録を作成できます。調整行を追加して、値引きや追加費用を記録することもできます。"
+          adjustments: "調整項目"
+          adjustments_body: "入金伝票には調整行を追加できます。事前に登録された調整タイプ（値引き、配送修正、返品など）を選択し、金額を入力します。"
+          search: "入金検索"
+          search_body: "入金検索画面では、卸先名や日付で入金記録を検索できます。"
+        invoices:
+          title: "請求書管理"
+          intro: "仕入先への請求書を作成・管理し、メールで送付できます。"
+          creating: "請求書の作成"
+          creating_body: "仕入日ページから請求書を作成できます。対象の仕入日を選択すると、その日の仕入データが自動的に集計されます。"
+          layouts: "請求書レイアウト"
+          layout_standard: "標準レイアウト — 仕入品目の詳細明細を含む請求書"
+          layout_simple: "簡易レイアウト — 合計金額のみのシンプルな請求書"
+          sending: "請求書の送付"
+          sending_body: "作成した請求書は、PDF添付メールとして仕入先に送信できます。送信はバックグラウンドジョブで処理されるため、画面を待つ必要はありません。"
+          tracking: "請求書の追跡"
+          tracking_body: "請求書一覧では、作成日、金額、送信状況を確認できます。"
+        materials_costs:
+          title: "原価管理"
+          intro: "原価管理では、商品のコスト構成要素を詳細に設定します。"
+          what_are_materials: "材料とは"
+          what_are_materials_body: "材料は、商品のコストを構成する要素です。容器、梱包資材、加工費、配送関連費など、様々な種類のコストを登録できます。"
+          billing_types: "課金タイプ"
+          type_per_item: "1個あたり — 商品数量に応じて計算（例：ラベル）"
+          type_per_box: "1箱あたり — 容器数量に応じて計算（例：梱包資材）"
+          type_per_freight: "1貨物あたり — 貨物数量に応じて計算（例：パレット費）"
+          type_per_supply: "仕入単位あたり — 仕入量に応じて計算（例：加工費）"
+          categories: "材料カテゴリ"
+          categories_body: "材料はカテゴリ別に整理できます。カテゴリを使用すると、材料一覧が見やすくなります。"
+          product_association: "商品との紐づけ"
+          product_association_body: "商品の編集画面で、その商品に使用する材料を選択します。材料のコストは注文の利益計算に自動的に反映されます。"
+
+      # =========================================================
+      # Admin Section
+      # =========================================================
+      admin:
+        index:
+          title: "管理設定"
+          intro: "管理設定では、Oroshiのシステム全体の基本設定を行います。これらの設定は、注文や出荷の動作に直接影響します。"
+          overview: "概要"
+          overview_body: "管理者は以下の設定を管理できます。すべての設定はダッシュボードからアクセスできます。"
+          settings_list: "設定項目"
+          setting_company: "会社設定 — 会社名、住所、連絡先"
+          setting_buyers: "卸先管理 — 卸先の登録、コスト設定、手数料"
+          setting_products: "商品管理 — 商品とバリエーションの設定"
+          setting_users: "ユーザー管理 — ユーザーの役割とアクセス権限"
+        company_setup:
+          title: "会社設定"
+          intro: "会社の基本情報を設定します。ここで設定した情報は、請求書やPDFドキュメントに使用されます。"
+          fields: "設定項目"
+          field_name: "会社名 — 請求書やドキュメントに表示される会社名"
+          field_postal: "郵便番号 — 会社の郵便番号"
+          field_address: "住所 — 会社の住所"
+          field_phone: "電話番号 — 連絡先電話番号"
+          field_fax: "FAX番号 — FAX番号"
+          field_email: "メールアドレス — 連絡先メールアドレス"
+          field_web: "ウェブサイト — 会社のウェブサイトURL"
+          field_invoice: "インボイス番号 — 適格請求書発行事業者の登録番号"
+          saving: "設定の保存"
+          saving_body: "設定を変更した後、保存ボタンをクリックして変更を確定します。変更はすぐに反映されます。"
+        buyer_management:
+          title: "卸先管理"
+          intro: "卸先（卸売先）の登録と管理方法を説明します。"
+          creating_buyers: "卸先の作成"
+          creating_buyers_body: "ダッシュボードの卸先タブから新規卸先を作成できます。名前、カラーコード、取引先タイプ（卸売市場・レストランなど）を設定します。"
+          cost_settings: "コスト設定"
+          handling_cost: "取扱コスト — 一括りあたりのコスト（事務手数料など）"
+          optional_cost: "オプションコスト — 追加のコスト（特別な取り扱い費用など）"
+          commission: "手数料率 — 売上から控除される手数料のパーセンテージ"
+          shipping_association: "配送方法の紐づけ"
+          shipping_association_body: "卸先ごとに利用可能な配送方法を設定できます。注文作成時に卸先を選択すると、紐づけられた配送方法のみが表示されます。"
+          color_coding: "カラーコード"
+          color_coding_body: "各卸先にカラーコードを設定すると、注文ダッシュボードで卸先ごとの注文が色分けされ、視覚的に区別しやすくなります。"
+        product_management:
+          title: "商品管理"
+          intro: "商品とそのバリエーションの設定方法を説明します。"
+          product_hierarchy: "商品の階層"
+          product_hierarchy_body: "商品は2階層で管理されます。商品（例：サーモン刺身）の下に、商品バリエーション（例：100g・200g・500g）を登録します。"
+          creating_products: "商品の作成"
+          creating_products_body: "ダッシュボードの商品タブから新規商品を作成できます。名前、表示順、使用する材料を指定します。"
+          variations: "バリエーションの設定"
+          variations_body: "各バリエーションには、名前、単価、梱包、賞味期限、寸法などの情報を設定します。バリエーションごとに画像もアップロードできます。"
+          material_costs: "原価の確認"
+          material_costs_body: "商品の詳細画面で、材料ごとのコスト内訳を確認できます。材料の設定変更は即座にコスト計算に反映されます。"
+          positioning: "表示順"
+          positioning_body: "商品と商品バリエーションの表示順は、ドラッグ＆ドロップで自由に変更できます。"
+        user_management:
+          title: "ユーザー管理"
+          intro: "ユーザーの役割とアクセス権限を管理します。"
+          roles: "ユーザーの役割"
+          role_admin: "管理者 — すべての機能にアクセス可能。システム設定の変更、ユーザー管理が可能。"
+          role_vip: "VIP — ほとんどの機能にアクセス可能。入金管理を含む。"
+          role_employee: "従業員 — 日常業務に必要な機能にアクセス可能。仕入れ入力、注文管理など。"
+          role_supplier: "仕入先 — 自社に関連する仕入データのみ閲覧可能。"
+          role_user: "一般ユーザー — 基本的な閲覧権限のみ。"
+          approval: "ユーザーの承認"
+          approval_body: "新規ユーザーは登録後、管理者による承認が必要です。未承認のユーザーにはアクセス制限がかかります。"
+          profile: "プロフィール"
+          profile_body: "ユーザーは自分のプロフィール（メールアドレス、ユーザー名、パスワード）を編集できます。ナビゲーションバーの人物アイコンからアクセスできます。"
diff --git a/config/routes.rb b/config/routes.rb
index a2cec3b..958bf24 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -34,6 +34,11 @@
   get "privacy_policy", to: "legal#privacy_policy", as: :privacy_policy
   get "terms_of_service", to: "legal#terms_of_service", as: :terms_of_service
 
+  # Documentation
+  get "documentation", to: "documentation#index", as: :documentation_index
+  get "documentation/:section", to: "documentation#section", as: :documentation_section
+  get "documentation/:section/:page", to: "documentation#page", as: :documentation_page
+
   # Onboarding wizard
   resources :onboarding, only: [ :index, :show, :update ] do
     member do
diff --git a/test/controllers/oroshi/documentation_controller_test.rb b/test/controllers/oroshi/documentation_controller_test.rb
new file mode 100644
index 0000000..52ac07b
--- /dev/null
+++ b/test/controllers/oroshi/documentation_controller_test.rb
@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Oroshi::DocumentationControllerTest < ActionDispatch::IntegrationTest
+  setup do
+    @admin = create(:user, :admin)
+    create(:onboarding_progress, :completed, user: @admin)
+    sign_in @admin
+  end
+
+  # === Index ===
+
+  test "GET documentation index returns http success in Japanese" do
+    get oroshi.documentation_index_path(locale: :ja)
+    assert_response :success
+  end
+
+  test "GET documentation index returns http success in English" do
+    get oroshi.documentation_index_path(locale: :en)
+    assert_response :success
+  end
+
+  # === Section Index Pages ===
+
+  Oroshi::DocumentationController::ALL_SECTIONS.each do |section|
+    test "GET documentation section #{section} returns http success in Japanese" do
+      get oroshi.documentation_section_path(section: section, locale: :ja)
+      assert_response :success
+    end
+
+    test "GET documentation section #{section} returns http success in English" do
+      get oroshi.documentation_section_path(section: section, locale: :en)
+      assert_response :success
+    end
+  end
+
+  # === Individual Pages ===
+
+  Oroshi::DocumentationController::SECTIONS.each do |section, pages|
+    pages.each do |page|
+      test "GET documentation page #{section}/#{page} returns http success in Japanese" do
+        get oroshi.documentation_page_path(section: section, page: page, locale: :ja)
+        assert_response :success
+      end
+
+      test "GET documentation page #{section}/#{page} returns http success in English" do
+        get oroshi.documentation_page_path(section: section, page: page, locale: :en)
+        assert_response :success
+      end
+    end
+  end
+
+  # === Error Handling ===
+
+  test "GET invalid section redirects with alert" do
+    get oroshi.documentation_section_path(section: "nonexistent", locale: :ja)
+    assert_redirected_to oroshi.documentation_index_path
+    assert_equal I18n.t("oroshi.documentation.messages.invalid_section"), flash[:alert]
+  end
+
+  test "GET invalid page redirects with alert" do
+    get oroshi.documentation_page_path(section: "orders", page: "nonexistent", locale: :ja)
+    assert_redirected_to oroshi.documentation_section_path(section: "orders")
+    assert_equal I18n.t("oroshi.documentation.messages.invalid_page"), flash[:alert]
+  end
+
+  # === Authentication ===
+
+  test "unauthenticated user is redirected" do
+    sign_out @admin
+    get oroshi.documentation_index_path
+    assert_response :redirect
+  end
+end
diff --git a/test/i18n/documentation_i18n_test.rb b/test/i18n/documentation_i18n_test.rb
new file mode 100644
index 0000000..c537698
--- /dev/null
+++ b/test/i18n/documentation_i18n_test.rb
@@ -0,0 +1,122 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class DocumentationI18nTest < ActiveSupport::TestCase
+  DOCUMENTATION_SECTIONS = Oroshi::DocumentationController::SECTIONS
+
+  # === Chrome Keys ===
+
+  test "documentation chrome keys exist in both locales" do
+    chrome_keys = %w[title home overview search_placeholder see_also help_tooltip]
+
+    chrome_keys.each do |key|
+      full_key = "oroshi.documentation.chrome.#{key}"
+      %i[ja en].each do |locale|
+        value = I18n.t(full_key, locale: locale, raise: true)
+        assert value.present?, "Missing translation: #{full_key} in #{locale}"
+      end
+    end
+  end
+
+  # === Section Names ===
+
+  test "all section names have translations in both locales" do
+    DOCUMENTATION_SECTIONS.each_key do |section|
+      %i[ja en].each do |locale|
+        key = "oroshi.documentation.sections.#{section}"
+        value = I18n.t(key, locale: locale, raise: true)
+        assert value.present?, "Missing section name: #{key} in #{locale}"
+      end
+    end
+  end
+
+  # === Section Descriptions ===
+
+  test "all section descriptions have translations in both locales" do
+    DOCUMENTATION_SECTIONS.each_key do |section|
+      %i[ja en].each do |locale|
+        key = "oroshi.documentation.section_descriptions.#{section}"
+        value = I18n.t(key, locale: locale, raise: true)
+        assert value.present?, "Missing section description: #{key} in #{locale}"
+      end
+    end
+  end
+
+  # === Page Names ===
+
+  test "all page names have translations in both locales" do
+    DOCUMENTATION_SECTIONS.each do |section, pages|
+      pages.each do |page|
+        %i[ja en].each do |locale|
+          key = "oroshi.documentation.pages.#{section}.#{page}"
+          value = I18n.t(key, locale: locale, raise: true)
+          assert value.present?, "Missing page name: #{key} in #{locale}"
+        end
+      end
+    end
+  end
+
+  # === Message Keys ===
+
+  test "documentation message keys exist in both locales" do
+    %w[invalid_section invalid_page].each do |msg|
+      %i[ja en].each do |locale|
+        key = "oroshi.documentation.messages.#{msg}"
+        value = I18n.t(key, locale: locale, raise: true)
+        assert value.present?, "Missing message: #{key} in #{locale}"
+      end
+    end
+  end
+
+  # === Content Keys Symmetry ===
+
+  test "Japanese documentation keys have English equivalents" do
+    ja_keys = collect_leaf_keys(I18n.t("oroshi.documentation", locale: :ja), "oroshi.documentation")
+    en_keys = collect_leaf_keys(I18n.t("oroshi.documentation", locale: :en), "oroshi.documentation")
+
+    missing_in_en = ja_keys - en_keys
+    assert missing_in_en.empty?, "Keys in JA but missing in EN:\n#{missing_in_en.join("\n")}"
+  end
+
+  test "English documentation keys have Japanese equivalents" do
+    ja_keys = collect_leaf_keys(I18n.t("oroshi.documentation", locale: :ja), "oroshi.documentation")
+    en_keys = collect_leaf_keys(I18n.t("oroshi.documentation", locale: :en), "oroshi.documentation")
+
+    missing_in_ja = en_keys - ja_keys
+    assert missing_in_ja.empty?, "Keys in EN but missing in JA:\n#{missing_in_ja.join("\n")}"
+  end
+
+  # === Japanese Content Quality ===
+
+  test "Japanese section names contain kanji or kana" do
+    DOCUMENTATION_SECTIONS.each_key do |section|
+      value = I18n.t("oroshi.documentation.sections.#{section}", locale: :ja)
+      assert value.match?(/[\p{Han}\p{Hiragana}\p{Katakana}]/), "Japanese section name '#{section}' has no Japanese characters: #{value}"
+    end
+  end
+
+  test "Japanese page names contain kanji or kana" do
+    DOCUMENTATION_SECTIONS.each do |section, pages|
+      pages.each do |page|
+        value = I18n.t("oroshi.documentation.pages.#{section}.#{page}", locale: :ja)
+        assert value.match?(/[\p{Han}\p{Hiragana}\p{Katakana}]/), "Japanese page name '#{section}/#{page}' has no Japanese characters: #{value}"
+      end
+    end
+  end
+
+  private
+
+  def collect_leaf_keys(hash, prefix = "")
+    keys = []
+    hash.each do |key, value|
+      full_key = prefix.present? ? "#{prefix}.#{key}" : key.to_s
+      if value.is_a?(Hash)
+        keys.concat(collect_leaf_keys(value, full_key))
+      else
+        keys << full_key
+      end
+    end
+    keys
+  end
+end

From a8cd39e0f6293328872ad3d1c33bf3459254b42c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 19 Feb 2026 03:06:45 +0000
Subject: [PATCH 3/4] feat: add contextual help links, enhanced search, docs
 verification, and bug fixes

- Add documentation help link (?) to main navbar for global docs access
- Add contextual documentation_help_link to key views: orders dashboard,
  order search, supply calendar, payment receipts, materials, invoices,
  dashboard home, and dashboard navigation
- Enhance documentation search with keyboard navigation (arrow keys,
  Enter, Escape), section badge indicators, and click-outside dismiss
- Create docs:verify rake task for comprehensive documentation validation
  (view files, locale keys, key symmetry, cross-references, YAML validity)
- Fix supply_chain/index view referencing nonexistent diagram_*/data_flow_item_*
  locale keys (now correctly uses flow_* keys)

https://claude.ai/code/session_01BRR9VwvNKS1p7sPJKUt1Rb
---
 .../documentation_search_controller.js        |  77 +++++-
 app/views/layouts/documentation.html.erb      |   2 +-
 app/views/layouts/shared/_navbar.html.erb     |   7 +
 app/views/oroshi/dashboard/_home.html.erb     |   7 +-
 app/views/oroshi/dashboard/index.html.erb     |   5 +-
 .../documentation/supply_chain/index.html.erb |  14 +-
 app/views/oroshi/invoices/index.html.erb      |   4 +-
 app/views/oroshi/materials/index.html.erb     |   1 +
 app/views/oroshi/orders/index.html.erb        |   7 +-
 app/views/oroshi/orders/search.html.erb       |   4 +
 .../oroshi/payment_receipts/index.html.erb    |   3 +-
 app/views/oroshi/supplies/index.html.erb      |   3 +
 lib/tasks/docs.rake                           | 256 ++++++++++++++++++
 13 files changed, 364 insertions(+), 26 deletions(-)
 create mode 100644 lib/tasks/docs.rake

diff --git a/app/javascript/controllers/documentation_search_controller.js b/app/javascript/controllers/documentation_search_controller.js
index f1ab531..b10bc3b 100644
--- a/app/javascript/controllers/documentation_search_controller.js
+++ b/app/javascript/controllers/documentation_search_controller.js
@@ -5,25 +5,34 @@ export default class extends Controller {
 
   connect() {
     this.buildIndex()
+    this.selectedIndex = -1
   }
 
   buildIndex() {
     this.entries = []
-    document.querySelectorAll(".doc-sidebar .nav-link").forEach(link => {
-      this.entries.push({
-        text: link.textContent.trim().toLowerCase(),
-        label: link.textContent.trim(),
-        href: link.href
-      })
+    let currentSection = null
+
+    document.querySelectorAll(".doc-sidebar nav > *").forEach(el => {
+      if (el.classList.contains("nav-section")) {
+        currentSection = el.textContent.trim()
+      } else if (el.classList.contains("nav-link")) {
+        this.entries.push({
+          text: el.textContent.trim().toLowerCase(),
+          label: el.textContent.trim(),
+          href: el.href,
+          section: currentSection,
+          isSubpage: el.classList.contains("ps-4")
+        })
+      }
     })
   }
 
   search() {
     const query = this.inputTarget.value.trim().toLowerCase()
+    this.selectedIndex = -1
 
     if (query.length < 2) {
-      this.resultsTarget.style.display = "none"
-      this.resultsTarget.innerHTML = ""
+      this.hide()
       return
     }
 
@@ -36,8 +45,54 @@ export default class extends Controller {
     }
 
     this.resultsTarget.style.display = "block"
-    this.resultsTarget.innerHTML = matches.map(match =>
-      `<a href="${match.href}" class="d-block p-2 text-decoration-none border-bottom small">${match.label}</a>`
-    ).join("")
+    this.resultsTarget.innerHTML = matches.map((match, i) => {
+      const sectionBadge = match.section && match.isSubpage
+        ? `<span class="badge bg-light text-muted ms-1" style="font-size: 0.65rem;">${match.section}</span>`
+        : ""
+      return `<a href="${match.href}"
+                class="d-block p-2 text-decoration-none border-bottom small doc-search-result"
+                data-index="${i}">${match.label}${sectionBadge}</a>`
+    }).join("")
+  }
+
+  keydown(event) {
+    const results = this.resultsTarget.querySelectorAll(".doc-search-result")
+    if (results.length === 0) return
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      this.selectedIndex = Math.min(this.selectedIndex + 1, results.length - 1)
+      this.highlightResult(results)
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault()
+      this.selectedIndex = Math.max(this.selectedIndex - 1, 0)
+      this.highlightResult(results)
+    } else if (event.key === "Enter" && this.selectedIndex >= 0) {
+      event.preventDefault()
+      results[this.selectedIndex].click()
+    } else if (event.key === "Escape") {
+      this.hide()
+      this.inputTarget.blur()
+    }
+  }
+
+  highlightResult(results) {
+    results.forEach((r, i) => {
+      r.style.background = i === this.selectedIndex ? "#e9ecef" : ""
+    })
+    if (this.selectedIndex >= 0) {
+      results[this.selectedIndex].scrollIntoView({ block: "nearest" })
+    }
+  }
+
+  hide() {
+    this.resultsTarget.style.display = "none"
+    this.resultsTarget.innerHTML = ""
+  }
+
+  clickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.hide()
+    }
   }
 }
diff --git a/app/views/layouts/documentation.html.erb b/app/views/layouts/documentation.html.erb
index 50e5852..2bc0c40 100644
--- a/app/views/layouts/documentation.html.erb
+++ b/app/views/layouts/documentation.html.erb
@@ -63,7 +63,7 @@
                class="form-control form-control-sm doc-search-input"
                placeholder="<%= t('oroshi.documentation.chrome.search_placeholder') %>"
                data-documentation-search-target="input"
-               data-action="input->documentation-search#search">
+               data-action="input->documentation-search#search keydown->documentation-search#keydown">
         <div class="doc-search-results mt-1" data-documentation-search-target="results" style="display:none;"></div>
       </div>
 
diff --git a/app/views/layouts/shared/_navbar.html.erb b/app/views/layouts/shared/_navbar.html.erb
index 2fb26bc..ee14f58 100644
--- a/app/views/layouts/shared/_navbar.html.erb
+++ b/app/views/layouts/shared/_navbar.html.erb
@@ -29,6 +29,13 @@
             </li>
             <% if user_signed_in? %>
             <%= render 'oroshi/onboarding/checklist_dropdown' %>
+            <li class="nav-item">
+                <%= link_to documentation_index_path,
+                      class: 'btn btn-outline-dark border-0 tippy p-2',
+                      data: { tippy_content: t('oroshi.documentation.chrome.help_tooltip') } do %>
+                    <%= icon("question-circle") %>
+                <% end %>
+            </li>
             <li class="nav-item">
                 <div class="btn-group" role="group" aria-label="Basic">
                     <%= button_to main_app.destroy_user_session_path,
diff --git a/app/views/oroshi/dashboard/_home.html.erb b/app/views/oroshi/dashboard/_home.html.erb
index 6977031..56a4972 100644
--- a/app/views/oroshi/dashboard/_home.html.erb
+++ b/app/views/oroshi/dashboard/_home.html.erb
@@ -1,7 +1,7 @@
 <%= turbo_frame_tag 'dashboard_frame' do %>
 <div data-controller="oroshi--tabs">
   <div class="d-flex justify-content-between justify-items-center align-middle">
-      <div class="card-title">
+      <div class="card-title d-flex align-items-center gap-2">
           <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
               <li class="nav-item" role="presentation">
                   <button class="nav-link active"
@@ -83,7 +83,10 @@
               </li>
           </ul>
       </div>
-      <%= information_tippy('home') %>
+      <div class="d-flex gap-2 align-items-center">
+          <%= documentation_help_link('admin', 'company_setup') %>
+          <%= information_tippy('home') %>
+      </div>
   </div>
   <div class="tab-content" id="pills-tabContent">
       <div class="tab-pane fade show active"
diff --git a/app/views/oroshi/dashboard/index.html.erb b/app/views/oroshi/dashboard/index.html.erb
index af171b6..a3c30b8 100644
--- a/app/views/oroshi/dashboard/index.html.erb
+++ b/app/views/oroshi/dashboard/index.html.erb
@@ -5,7 +5,10 @@
     <%= render 'oroshi_modal' %>
 
     <div class="container-fluid d-flex flex-column flex-md-row align-items-start align-middle justify-content-center gap-2">
-        <div id="dashboard-nav" class="nav flex-column nav-pills me-3 text-center align-self-center align-self-md-start" style="min-width: 15rem;" id="v-pills-tab" role="tablist" aria-orientation="vertical">
+        <div id="dashboard-nav" class="nav flex-column nav-pills me-3 text-center align-self-center align-self-md-start position-relative" style="min-width: 15rem;" id="v-pills-tab" role="tablist" aria-orientation="vertical">
+            <div class="text-end mb-1">
+                <%= documentation_help_link('getting_started', 'navigation') %>
+            </div>
             <%= dashboard_nav_link(t('.home'), oroshi_dashboard_home_path, active: true) %>
             <%= dashboard_nav_link(t('.suppliers_organizations'), oroshi_dashboard_suppliers_organizations_path) %>
             
diff --git a/app/views/oroshi/documentation/supply_chain/index.html.erb b/app/views/oroshi/documentation/supply_chain/index.html.erb
index feeebb0..39df2b6 100644
--- a/app/views/oroshi/documentation/supply_chain/index.html.erb
+++ b/app/views/oroshi/documentation/supply_chain/index.html.erb
@@ -7,16 +7,16 @@
 <p><%= t('oroshi.documentation.supply_chain.index.overview_body') %></p>
 
 <%= doc_diagram("graph LR
-  A[#{t('oroshi.documentation.supply_chain.index.diagram_supplier_org')}] --> B[#{t('oroshi.documentation.supply_chain.index.diagram_supplier')}]
-  B --> C[#{t('oroshi.documentation.supply_chain.index.diagram_supply_type')}]
-  C --> D[#{t('oroshi.documentation.supply_chain.index.diagram_variation')}]") %>
+  A[#{t('oroshi.documentation.supply_chain.index.flow_supplier_org').split(' — ').first}] --> B[#{t('oroshi.documentation.supply_chain.index.flow_supplier').split(' — ').first}]
+  B --> C[#{t('oroshi.documentation.supply_chain.index.flow_supply_type').split(' — ').first}]
+  C --> D[#{t('oroshi.documentation.supply_chain.index.flow_variation').split(' — ').first}]") %>
 
 <h2><%= t('oroshi.documentation.supply_chain.index.data_flow') %></h2>
 <ul>
-  <li><%= t('oroshi.documentation.supply_chain.index.data_flow_item_1') %></li>
-  <li><%= t('oroshi.documentation.supply_chain.index.data_flow_item_2') %></li>
-  <li><%= t('oroshi.documentation.supply_chain.index.data_flow_item_3') %></li>
-  <li><%= t('oroshi.documentation.supply_chain.index.data_flow_item_4') %></li>
+  <li><%= t('oroshi.documentation.supply_chain.index.flow_supplier_org') %></li>
+  <li><%= t('oroshi.documentation.supply_chain.index.flow_supplier') %></li>
+  <li><%= t('oroshi.documentation.supply_chain.index.flow_supply_type') %></li>
+  <li><%= t('oroshi.documentation.supply_chain.index.flow_variation') %></li>
 </ul>
 
 <%= doc_see_also("supply_chain/supply_intake", "supply_chain/suppliers", "supply_chain/supply_types") %>
diff --git a/app/views/oroshi/invoices/index.html.erb b/app/views/oroshi/invoices/index.html.erb
index 0efbca4..eb3e1c3 100644
--- a/app/views/oroshi/invoices/index.html.erb
+++ b/app/views/oroshi/invoices/index.html.erb
@@ -1,6 +1,8 @@
 <div class="container">
-    <div class="d-flex justify-content-center my-3">
+    <div class="d-flex justify-content-between align-items-center my-3">
+        <div></div>
         <%= will_paginate @invoices %>
+        <%= documentation_help_link('financials', 'invoices') %>
     </div>
 
     <div class="row g-3">
diff --git a/app/views/oroshi/materials/index.html.erb b/app/views/oroshi/materials/index.html.erb
index 8821805..5860535 100644
--- a/app/views/oroshi/materials/index.html.erb
+++ b/app/views/oroshi/materials/index.html.erb
@@ -3,6 +3,7 @@
     <div class="material-navigation card" style="min-width: 15rem;">
         <div class="p-2 d-flex justify-content-between align-items-center align-middle">
             <h6 class="mb-0">製造材料</h6>
+            <%= documentation_help_link('financials', 'materials_costs') %>
         </div>
         <% if @materials.exists? %>
         <div class="list-group overflow-auto border" style="max-height: 65vh;">
diff --git a/app/views/oroshi/orders/index.html.erb b/app/views/oroshi/orders/index.html.erb
index da394e0..ab80fd2 100644
--- a/app/views/oroshi/orders/index.html.erb
+++ b/app/views/oroshi/orders/index.html.erb
@@ -6,8 +6,11 @@
 
     <div class="container-fluid overflow-x-auto">
         <div class="card text-center">
-            <div class="card-header">
-                <%= render partial: 'oroshi/orders/dashboard/shared/order_view_nav' %>
+            <div class="card-header d-flex align-items-center">
+                <div class="flex-grow-1">
+                    <%= render partial: 'oroshi/orders/dashboard/shared/order_view_nav' %>
+                </div>
+                <%= documentation_help_link('orders', 'dashboard_tabs') %>
             </div>
             <div class="card-body" style="min-height: 45rem;">
                 <%= turbo_frame_tag 'orders_dashboard',
diff --git a/app/views/oroshi/orders/search.html.erb b/app/views/oroshi/orders/search.html.erb
index 0773b6a..18c83db 100644
--- a/app/views/oroshi/orders/search.html.erb
+++ b/app/views/oroshi/orders/search.html.erb
@@ -1,6 +1,10 @@
 <%= turbo_frame_tag 'app' do %>
 <% title "Oroshi - #{t('oroshi.orders.search.page_title')}" %>
 
+<div class="d-flex justify-content-end px-3 pt-2">
+  <%= documentation_help_link('orders', 'searching_orders') %>
+</div>
+
 <%= render 'oroshi/orders/search/search_form' %>
 
 <% if @orders.present? %>
diff --git a/app/views/oroshi/payment_receipts/index.html.erb b/app/views/oroshi/payment_receipts/index.html.erb
index 316b110..ba7ea08 100644
--- a/app/views/oroshi/payment_receipts/index.html.erb
+++ b/app/views/oroshi/payment_receipts/index.html.erb
@@ -15,7 +15,8 @@
                             <%= payment_receipt_nav_item('search') %>
                         </ul>
                     </div>
-                    <div class="pt-2 text-end">
+                    <div class="pt-2 text-end d-flex gap-2 align-items-center">
+                        <%= documentation_help_link('financials', 'payment_receipts') %>
                         <%= information_tippy('payment_receipt') %>
                     </div>
                 </div>
diff --git a/app/views/oroshi/supplies/index.html.erb b/app/views/oroshi/supplies/index.html.erb
index 9fb49ff..af0f9e0 100644
--- a/app/views/oroshi/supplies/index.html.erb
+++ b/app/views/oroshi/supplies/index.html.erb
@@ -5,6 +5,9 @@
     <%= render partial: 'oroshi/supplies/modal/init_supply_modal' %>
 
     <div class="container">
+        <div class="d-flex justify-content-end mb-2">
+            <%= documentation_help_link('supply_chain', 'supply_intake') %>
+        </div>
         <div id="supply_calendar" class="fullCalendar position-relative" data-oroshi--supplies--calendar-target="calendar"></div>
     </div>
 </div>
diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake
new file mode 100644
index 0000000..217f9a5
--- /dev/null
+++ b/lib/tasks/docs.rake
@@ -0,0 +1,256 @@
+# frozen_string_literal: true
+
+namespace :docs do
+  desc "Verify documentation integrity: views, locale keys, cross-references"
+  task verify: :environment do
+    puts "\n" + "=" * 80
+    puts "Documentation Verification"
+    puts "=" * 80 + "\n"
+
+    all_passed = true
+    checks = []
+
+    sections = Oroshi::DocumentationController::SECTIONS
+
+    # ---------------------------------------------------------------
+    # Check 1: All view files exist
+    # ---------------------------------------------------------------
+    print "1. Checking view files exist... "
+    missing_views = []
+    base = Oroshi::Engine.root.join("app/views/oroshi/documentation")
+
+    sections.each do |section, pages|
+      index_file = base.join("#{section}/index.html.erb")
+      missing_views << "#{section}/index.html.erb" unless File.exist?(index_file)
+
+      pages.each do |page|
+        page_file = base.join("#{section}/#{page}.html.erb")
+        missing_views << "#{section}/#{page}.html.erb" unless File.exist?(page_file)
+      end
+    end
+
+    # Top-level index
+    missing_views << "index.html.erb" unless File.exist?(base.join("index.html.erb"))
+
+    if missing_views.empty?
+      puts "PASS (#{sections.sum { |_, p| p.size } + sections.size + 1} files)"
+      checks << { name: "View files", status: :pass }
+    else
+      puts "FAIL"
+      missing_views.each { |f| puts "   Missing: #{f}" }
+      checks << { name: "View files", status: :fail, details: missing_views }
+      all_passed = false
+    end
+
+    # ---------------------------------------------------------------
+    # Check 2: All required locale keys exist in both locales
+    # ---------------------------------------------------------------
+    print "2. Checking locale key coverage... "
+    missing_keys = { ja: [], en: [] }
+
+    %i[ja en].each do |locale|
+      # Chrome keys
+      %w[title home overview search_placeholder see_also help_tooltip].each do |key|
+        full = "oroshi.documentation.chrome.#{key}"
+        missing_keys[locale] << full unless I18n.exists?(full, locale)
+      end
+
+      # Message keys
+      %w[invalid_section invalid_page].each do |key|
+        full = "oroshi.documentation.messages.#{key}"
+        missing_keys[locale] << full unless I18n.exists?(full, locale)
+      end
+
+      # Index keys
+      %w[title subtitle].each do |key|
+        full = "oroshi.documentation.index.#{key}"
+        missing_keys[locale] << full unless I18n.exists?(full, locale)
+      end
+
+      # Section/page name keys
+      sections.each do |section, pages|
+        %W[oroshi.documentation.sections.#{section} oroshi.documentation.section_descriptions.#{section}].each do |full|
+          missing_keys[locale] << full unless I18n.exists?(full, locale)
+        end
+
+        pages.each do |page|
+          full = "oroshi.documentation.pages.#{section}.#{page}"
+          missing_keys[locale] << full unless I18n.exists?(full, locale)
+        end
+      end
+    end
+
+    total_missing = missing_keys[:ja].size + missing_keys[:en].size
+    if total_missing.zero?
+      puts "PASS"
+      checks << { name: "Locale key coverage", status: :pass }
+    else
+      puts "FAIL (#{total_missing} missing)"
+      missing_keys.each do |locale, keys|
+        keys.each { |k| puts "   [#{locale}] #{k}" }
+      end
+      checks << { name: "Locale key coverage", status: :fail }
+      all_passed = false
+    end
+
+    # ---------------------------------------------------------------
+    # Check 3: JA/EN key symmetry
+    # ---------------------------------------------------------------
+    print "3. Checking JA/EN key symmetry... "
+
+    ja_tree = I18n.backend.send(:translations)[:ja][:oroshi][:documentation] rescue {}
+    en_tree = I18n.backend.send(:translations)[:en][:oroshi][:documentation] rescue {}
+
+    def leaf_keys(hash, prefix = "")
+      keys = []
+      hash.each do |k, v|
+        full = prefix.empty? ? k.to_s : "#{prefix}.#{k}"
+        if v.is_a?(Hash)
+          keys.concat(leaf_keys(v, full))
+        else
+          keys << full
+        end
+      end
+      keys
+    end
+
+    ja_keys = leaf_keys(ja_tree).sort
+    en_keys = leaf_keys(en_tree).sort
+
+    only_ja = ja_keys - en_keys
+    only_en = en_keys - ja_keys
+
+    if only_ja.empty? && only_en.empty?
+      puts "PASS (#{ja_keys.size} keys each)"
+      checks << { name: "Key symmetry", status: :pass }
+    else
+      puts "FAIL"
+      only_ja.each { |k| puts "   JA only: #{k}" }
+      only_en.each { |k| puts "   EN only: #{k}" }
+      checks << { name: "Key symmetry", status: :fail }
+      all_passed = false
+    end
+
+    # ---------------------------------------------------------------
+    # Check 4: Cross-references (doc_see_also) point to valid pages
+    # ---------------------------------------------------------------
+    print "4. Checking cross-references... "
+    invalid_refs = []
+
+    Dir.glob(base.join("**/*.html.erb")).each do |file|
+      content = File.read(file)
+      content.scan(/doc_see_also\(([^)]+)\)/).each do |match|
+        refs = match[0].scan(/"([^"]+)"/)
+        refs.each do |ref_arr|
+          ref = ref_arr[0]
+          section_name, page_name = ref.split("/")
+          section_sym = section_name.to_sym
+
+          unless sections.key?(section_sym) && sections[section_sym].include?(page_name)
+            relative = file.sub(base.to_s + "/", "")
+            invalid_refs << "#{relative}: #{ref}"
+          end
+        end
+      end
+    end
+
+    if invalid_refs.empty?
+      puts "PASS"
+      checks << { name: "Cross-references", status: :pass }
+    else
+      puts "FAIL"
+      invalid_refs.each { |r| puts "   Invalid ref: #{r}" }
+      checks << { name: "Cross-references", status: :fail }
+      all_passed = false
+    end
+
+    # ---------------------------------------------------------------
+    # Check 5: No hardcoded strings in views (basic heuristic)
+    # ---------------------------------------------------------------
+    print "5. Checking for potential hardcoded strings... "
+    hardcoded = []
+
+    Dir.glob(base.join("**/*.html.erb")).each do |file|
+      content = File.read(file)
+      relative = file.sub(base.to_s + "/", "")
+
+      content.each_line.with_index(1) do |line, num|
+        stripped = line.strip
+
+        # Skip ERB tags, HTML-only lines, blank lines, comments
+        next if stripped.empty?
+        next if stripped.start_with?("<%")
+        next if stripped.start_with?("<%#")
+        next if stripped =~ /\A<\/?\w+[^>]*>\z/  # Pure HTML tag
+        next if stripped =~ /\A<% end %>\z/
+
+        # Look for visible text outside ERB tags (rough heuristic)
+        visible = stripped.gsub(/<[^>]+>/, "").gsub(/<%.*?%>/, "").strip
+        next if visible.empty?
+        next if visible =~ /\A[\s\d\-×=+()]+\z/  # Numbers/operators only
+
+        hardcoded << "#{relative}:#{num}: #{stripped[0..80]}"
+      end
+    end
+
+    if hardcoded.empty?
+      puts "PASS"
+      checks << { name: "Hardcoded strings", status: :pass }
+    else
+      puts "WARNING (#{hardcoded.size} potential)"
+      hardcoded.first(10).each { |h| puts "   #{h}" }
+      puts "   ... and #{hardcoded.size - 10} more" if hardcoded.size > 10
+      checks << { name: "Hardcoded strings", status: :warn }
+    end
+
+    # ---------------------------------------------------------------
+    # Check 6: YAML validity
+    # ---------------------------------------------------------------
+    print "6. Checking YAML validity... "
+    yaml_errors = []
+    locale_dir = Oroshi::Engine.root.join("config/locales")
+
+    %w[documentation.ja.yml documentation.en.yml].each do |fname|
+      path = locale_dir.join(fname)
+      begin
+        YAML.load_file(path, permitted_classes: [Symbol])
+      rescue Psych::SyntaxError => e
+        yaml_errors << "#{fname}: #{e.message}"
+      end
+    end
+
+    if yaml_errors.empty?
+      puts "PASS"
+      checks << { name: "YAML validity", status: :pass }
+    else
+      puts "FAIL"
+      yaml_errors.each { |e| puts "   #{e}" }
+      checks << { name: "YAML validity", status: :fail }
+      all_passed = false
+    end
+
+    # ---------------------------------------------------------------
+    # Summary
+    # ---------------------------------------------------------------
+    puts "\n" + "=" * 80
+    puts "Summary"
+    puts "=" * 80
+
+    pass_count = checks.count { |c| c[:status] == :pass }
+    fail_count = checks.count { |c| c[:status] == :fail }
+    warn_count = checks.count { |c| c[:status] == :warn }
+
+    puts "\nTotal Checks: #{checks.length}"
+    puts "  Passed:   #{pass_count}"
+    puts "  Failed:   #{fail_count}" if fail_count.positive?
+    puts "  Warnings: #{warn_count}" if warn_count.positive?
+
+    if all_passed
+      puts "\nAll documentation checks passed."
+      exit 0
+    else
+      puts "\nDocumentation verification failed. Please fix the issues above."
+      exit 1
+    end
+  end
+end

From cbc49d2d94df4c60c74f46c99ed49760dcb83c3c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 19 Feb 2026 03:08:42 +0000
Subject: [PATCH 4/4] fix: replace hardcoded "No results" with i18n translation
 in doc search

Pass translated no_results string from layout to Stimulus controller
via data value attribute. Adds chrome.no_results key to both JA/EN
locale files (442 keys each now).

https://claude.ai/code/session_01BRR9VwvNKS1p7sPJKUt1Rb
---
 app/javascript/controllers/documentation_search_controller.js | 4 +++-
 app/views/layouts/documentation.html.erb                      | 3 ++-
 config/locales/documentation.en.yml                           | 1 +
 config/locales/documentation.ja.yml                           | 1 +
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/javascript/controllers/documentation_search_controller.js b/app/javascript/controllers/documentation_search_controller.js
index b10bc3b..08d9d1d 100644
--- a/app/javascript/controllers/documentation_search_controller.js
+++ b/app/javascript/controllers/documentation_search_controller.js
@@ -2,6 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["input", "results"]
+  static values = { noResults: String }
 
   connect() {
     this.buildIndex()
@@ -40,7 +41,8 @@ export default class extends Controller {
 
     if (matches.length === 0) {
       this.resultsTarget.style.display = "block"
-      this.resultsTarget.innerHTML = '<div class="p-2 text-muted small">No results</div>'
+      const noResultsText = this.hasNoResultsValue ? this.noResultsValue : "No results"
+      this.resultsTarget.innerHTML = `<div class="p-2 text-muted small">${noResultsText}</div>`
       return
     }
 
diff --git a/app/views/layouts/documentation.html.erb b/app/views/layouts/documentation.html.erb
index 2bc0c40..c64b740 100644
--- a/app/views/layouts/documentation.html.erb
+++ b/app/views/layouts/documentation.html.erb
@@ -53,7 +53,8 @@
 
   <div class="d-flex flex-column flex-lg-row flex-grow-1">
     <%# Sidebar Navigation %>
-    <aside class="doc-sidebar p-3" data-controller="documentation-search">
+    <aside class="doc-sidebar p-3" data-controller="documentation-search"
+           data-documentation-search-no-results-value="<%= t('oroshi.documentation.chrome.no_results') %>">
       <div class="mb-3">
         <%= doc_locale_toggle %>
       </div>
diff --git a/config/locales/documentation.en.yml b/config/locales/documentation.en.yml
index 516d63a..3dc1ff1 100644
--- a/config/locales/documentation.en.yml
+++ b/config/locales/documentation.en.yml
@@ -8,6 +8,7 @@ en:
         search_placeholder: "Search documentation..."
         see_also: "Related Pages"
         help_tooltip: "View help"
+        no_results: "No results found"
       messages:
         invalid_section: "The specified section was not found."
         invalid_page: "The specified page was not found."
diff --git a/config/locales/documentation.ja.yml b/config/locales/documentation.ja.yml
index dd5b607..72065bb 100644
--- a/config/locales/documentation.ja.yml
+++ b/config/locales/documentation.ja.yml
@@ -8,6 +8,7 @@ ja:
         search_placeholder: "ドキュメントを検索..."
         see_also: "関連ページ"
         help_tooltip: "ヘルプを見る"
+        no_results: "検索結果がありません"
       messages:
         invalid_section: "指定されたセクションが見つかりません。"
         invalid_page: "指定されたページが見つかりません。"