Add Restocking view, GitHub Actions workflow, and various feature imp…

.github/workflows/claude.yml

@@ -0,0 +1,37 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+      id-token: write
+      actions: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}

CLAUDE.md

@@ -72,3 +72,6 @@ npm install && npm run dev
 - Status: green/blue/yellow/red
 - Charts: Custom SVG, CSS Grid for layouts
 - No emojis in UI
+
+## Code Style
+- Always document non-obvious logic changes with comments

client/src/App.vue

@@ -25,6 +25,9 @@
           <router-link to="/reports" :class="{ active: $route.path === '/reports' }">
             Reports
           </router-link>
+          <router-link to="/restocking" :class="{ active: $route.path === '/restocking' }">
+            Restocking
+          </router-link>
         </nav>
         <LanguageSwitcher />
         <ProfileMenu

client/src/api.js

@@ -102,5 +102,10 @@ export const api = {
   async getPurchaseOrderByBacklogItem(backlogItemId) {
     const response = await axios.get(`${API_BASE_URL}/purchase-orders/${backlogItemId}`)
     return response.data
+  },
+
+  async createRestockOrder(data) {
+    const response = await axios.post(`${API_BASE_URL}/restock/orders`, data)
+    return response.data
   }
 }

client/src/main.js

@@ -7,6 +7,7 @@ import Orders from './views/Orders.vue'
 import Demand from './views/Demand.vue'
 import Spending from './views/Spending.vue'
 import Reports from './views/Reports.vue'
+import Restocking from './views/Restocking.vue'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -16,7 +17,8 @@ const router = createRouter({
     { path: '/orders', component: Orders },
     { path: '/demand', component: Demand },
     { path: '/spending', component: Spending },
-    { path: '/reports', component: Reports }
+    { path: '/reports', component: Reports },
+    { path: '/restocking', component: Restocking }
   ]
 })
 

client/src/views/Orders.vue

@@ -74,6 +74,58 @@
           </table>
         </div>
       </div>
+
+      <div class="card restock-card">
+        <div class="card-header">
+          <h3 class="card-title">Submitted Orders ({{ restockOrders.length }})</h3>
+        </div>
+        <div v-if="restockOrders.length === 0" class="empty-restock">
+          No restocking orders placed yet.
+        </div>
+        <div v-else class="table-container">
+          <table class="orders-table">
+            <thead>
+              <tr>
+                <th class="col-order-number">Order #</th>
+                <th class="col-date">Placed</th>
+                <th class="col-items">Items</th>
+                <th class="col-status">Status</th>
+                <th class="col-date">Est. Delivery</th>
+                <th class="col-value">Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="order in restockOrders" :key="order.id">
+                <td class="col-order-number"><strong>{{ order.order_number }}</strong></td>
+                <td class="col-date">{{ formatDate(order.order_date) }}</td>
+                <td class="col-items">
+                  <div class="restock-items">
+                    <div v-for="(item, idx) in order.items" :key="idx" class="restock-item-line">
+                      <span>{{ item.name }} x{{ item.quantity }}</span>
+                      <span
+                        :class="[
+                          'badge',
+                          'lead-badge',
+                          item.lead_time_days === 7 ? 'success' :
+                          item.lead_time_days === 14 ? 'info' :
+                          item.lead_time_days === 21 ? 'warning' : 'info'
+                        ]"
+                      >{{ item.lead_time_days }} days</span>
+                    </div>
+                  </div>
+                </td>
+                <td class="col-status">
+                  <span :class="['badge', getOrderStatusClass(order.status)]">
+                    {{ order.status }}
+                  </span>
+                </td>
+                <td class="col-date">{{ formatDate(order.expected_delivery) }}</td>
+                <td class="col-value"><strong>{{ currencySymbol }}{{ order.total_value.toLocaleString() }}</strong></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -143,6 +195,11 @@ export default {
       return statusMap[status] || 'info'
     }
 
+    // Filter orders that were submitted via the restock flow
+    const restockOrders = computed(() => {
+      return orders.value.filter(order => order.order_number.startsWith('RSTO-'))
+    })
+
     const formatDate = (dateString) => {
       const { currentLocale } = useI18n()
       const locale = currentLocale.value === 'ja' ? 'ja-JP' : 'en-US'
@@ -160,6 +217,7 @@ export default {
       loading,
       error,
       orders,
+      restockOrders,
       getOrdersByStatus,
       getOrderStatusClass,
       formatDate,
@@ -276,4 +334,10 @@ export default {
   font-size: 0.813rem;
   color: #64748b;
 }
+
+.restock-card { margin-top: 1.25rem; }
+.restock-items { display: flex; flex-direction: column; gap: 0.375rem; }
+.restock-item-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #334155; }
+.lead-badge { font-size: 0.7rem; padding: 0.1rem 0.4rem; }
+.empty-restock { padding: 2rem; text-align: center; color: #64748b; font-size: 0.9rem; }
 </style>