From 13d5dee791b8b04d2e07b482753ad1ce0535cf0f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 16 Jun 2026 17:23:09 +0000
Subject: [PATCH 1/3] Add coding guideline to document non-obvious logic
 changes

---
 CLAUDE.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index d2086efa..7a6ca885 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -46,6 +46,9 @@ npm install && npm run dev
 **Data Flow**: Vue filters → `client/src/api.js` → FastAPI → In-memory filtering → Pydantic validation → Computed properties
 **Reactivity**: Raw data in refs (`allOrders`, `inventoryItems`), derived data in computed properties
 
+## Coding Guidelines
+- Always document non-obvious logic changes with comments
+
 ## API Endpoints
 - `GET /api/inventory` - Filters: warehouse, category
 - `GET /api/orders` - Filters: warehouse, category, status, month

From 903e8dab9e42e5b48e673daddbd3cb87a11ca709 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 16 Jun 2026 17:44:41 +0000
Subject: [PATCH 2/3] Add vue-optimizer skill for performance and code-reuse
 analysis

---
 .claude/skills/vue-optimizer/SKILL.md | 130 ++++++++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 .claude/skills/vue-optimizer/SKILL.md

diff --git a/.claude/skills/vue-optimizer/SKILL.md b/.claude/skills/vue-optimizer/SKILL.md
new file mode 100644
index 00000000..d9015e40
--- /dev/null
+++ b/.claude/skills/vue-optimizer/SKILL.md
@@ -0,0 +1,130 @@
+---
+name: vue-optimizer
+description: Analyzes Vue 3 component structure and produces a prioritized, report-only set of performance and code-reuse optimization suggestions. Use this skill when asked to review, audit, profile, or optimize Vue components (.vue files) for performance, re-renders, reactivity efficiency, or duplicated UI/logic. Does NOT modify files.
+---
+
+# Vue Component Optimizer (Analyze & Report)
+
+This skill inspects the Vue 3 Composition API frontend and reports **prioritized
+optimization opportunities**. It is **report-only**: it never edits `.vue` files.
+Surface findings; let the user decide what to apply. If they ask you to apply a
+finding afterward, delegate the `.vue` edit to the **vue-expert** subagent per
+the project's mandatory rule.
+
+## When to use
+
+- "Analyze / audit / review / optimize the Vue components"
+- "Why is this page slow / re-rendering too much?"
+- "Find duplicated components or logic we can share"
+- Before a refactor, to scope where the wins are
+
+## Scope & priorities
+
+Primary focus: **performance**. Secondary: **code reuse**. Stay conservative —
+report opportunities with evidence (`file:line`), never guess. Do not invent
+problems; if a component is already clean, say so.
+
+## Analysis workflow
+
+1. **Inventory the components.** List `client/src/views/*.vue` and
+   `client/src/components/*.vue`. Note each component's template size and
+   `setup()` logic size.
+2. **Read each component** (template, `<script>`, `<style scoped>`).
+3. **Run the performance checklist** (below) against every component.
+4. **Run the code-reuse checklist** across the whole set (cross-file).
+5. **Produce the report** in the format below — ranked by impact.
+
+Keep the analysis grounded in the patterns documented in `client/CLAUDE.md`.
+
+## Performance checklist (primary)
+
+For each component, check for and record line numbers of:
+
+1. **Methods used where computed belongs.** Functions called in the template
+   that derive data from reactive state and re-run on every render. These belong
+   in `computed()` (cached until deps change).
+   - Smell: `getForecastsByTrend(...)`, `getChangePercent(item)` etc. invoked
+     multiple times inside the template / inside `v-for`.
+2. **`v-for` keys.** Flag `:key="index"` or missing keys. Recommend a stable
+   unique key (`sku`, `id`, `month`).
+3. **Filtering/sorting/mapping inside the template or inside `v-for`.** Heavy
+   array ops in render should move to `computed`.
+4. **Repeated computation in a loop.** The same derived value computed per row
+   instead of once.
+5. **`v-if` vs `v-show`.** Frequently toggled blocks (tabs, charts, modals shown
+   often) using `v-if` should consider `v-show`; rarely shown heavy content
+   using `v-show` should consider `v-if`.
+6. **Inline object/array/function literals in templates** passed as props or
+   bound (`:style="{...}"`, `:class="[...]"`, `@click="() => ..."`) inside large
+   lists — these create new references each render.
+7. **Unbounded lists.** Tables/lists rendering all rows with no pagination,
+   `slice`, or virtualization (the orders dataset is large — 250 rows).
+8. **Watchers that refetch too broadly.** `watch` triggering full reloads on
+   every keystroke/filter change without debounce (`watchDebounced`).
+9. **Missing lazy-loading / code-splitting.** Heavy or rarely-used components
+   (modals, charts) imported eagerly instead of via `defineAsyncComponent`.
+10. **Reactivity overhead.** `ref`/`reactive` on large static data that never
+    changes; destructured props losing reactivity.
+
+## Code-reuse checklist (secondary)
+
+Cross-file, look for:
+
+1. **Duplicated template blocks** — near-identical card/table/badge markup
+   repeated across views → candidate shared component in `components/`.
+2. **Duplicated logic** — the same helper reimplemented in multiple views
+   (e.g., percent-change, color-by-trend, currency formatting) → candidate
+   composable in `composables/` or util in `utils/`.
+3. **Repeated API/data-loading boilerplate** (`loading/error/try-catch-finally`)
+   → candidate `useAsyncData`-style composable.
+4. **Repeated inline styles / magic colors** (`#10b981`, `#ef4444`) → candidate
+   shared CSS variables / design tokens.
+
+## Severity rubric
+
+- **High** — measurable render cost on large lists, or correctness-adjacent
+  (index keys causing DOM reuse bugs).
+- **Medium** — repeated work that scales with data but on small sets today.
+- **Low** — cleanliness / future-proofing; minor wins.
+
+## Report format
+
+Output a single Markdown report. Do not edit files.
+
+```markdown
+# Vue Optimization Report
+
+## Summary
+- Components analyzed: N (views: X, components: Y)
+- Findings: H high, M medium, L low
+- Top 3 wins: <one line each>
+
+## Findings
+
+### [HIGH] <Short title> — `client/src/views/Foo.vue:42`
+**Category:** Performance · Methods→computed
+**What:** <what the code does now, with the snippet/line>
+**Why it matters:** <impact, e.g. re-runs N times per render over 250 rows>
+**Suggested change:** <concrete fix; show a small before/after if helpful>
+
+### [MEDIUM] ...
+
+## Code-reuse opportunities
+- `Foo.vue:120` and `Bar.vue:88` repeat the trend-badge block → extract `TrendBadge.vue`.
+
+## Recommended order of work
+1. ...
+2. ...
+
+## Notes
+- Report-only. To apply any item, delegate the .vue edit to the vue-expert subagent.
+```
+
+## Guardrails
+
+- **Never modify `.vue` files** in this skill — report only.
+- **Cite evidence** (`file:line`) for every finding; no vague claims.
+- **Don't over-report.** Prefer a short list of real wins over an exhaustive
+  list of nitpicks. If something is already optimal, note it and move on.
+- **Match house style** — recommendations must align with `client/CLAUDE.md`
+  (Composition API, computed for derived data, unique keys, centralized API).

From a65c09aee9e7da49cad6d324958aeb88ca23a350 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 16 Jun 2026 17:56:06 +0000
Subject: [PATCH 3/3] Fix Reports page bugs and Backlog i18n

Reports.vue rewritten from Options API to Composition API to match the
rest of the app:
- Add Japanese/English i18n via t() (was hardcoded English)
- Respect global filter bar (useFilters + watch); backend reports
  endpoints now accept warehouse/category/status/month params
- Use centralized api client instead of direct axios calls
- Remove all debug console.log statements
- Use stable v-for keys instead of array index
- Localize currency via formatCurrency (was hardcoded $)
- Compute max revenue once instead of recomputing per bar
- Localize month formatting

Also fix hardcoded Reports nav label in App.vue and translate all
hardcoded strings in Backlog.vue (stretch goal).
---
 client/src/App.vue           |   2 +-
 client/src/api.js            |  22 +++
 client/src/locales/en.js     |  54 ++++++
 client/src/locales/ja.js     |  54 ++++++
 client/src/views/Backlog.vue |  53 ++++--
 client/src/views/Reports.vue | 354 +++++++++++++++--------------------
 server/main.py               |  30 ++-
 7 files changed, 337 insertions(+), 232 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index c2da05a5..108da337 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -23,7 +23,7 @@
             {{ t('nav.demandForecast') }}
           </router-link>
           <router-link to="/reports" :class="{ active: $route.path === '/reports' }">
-            Reports
+            {{ t('nav.reports') }}
           </router-link>
         </nav>
         <LanguageSwitcher />
diff --git a/client/src/api.js b/client/src/api.js
index 11cb9db7..6afab412 100644
--- a/client/src/api.js
+++ b/client/src/api.js
@@ -43,6 +43,28 @@ export const api = {
     return response.data
   },
 
+  async getQuarterlyReports(filters = {}) {
+    const params = new URLSearchParams()
+    if (filters.warehouse && filters.warehouse !== 'all') params.append('warehouse', filters.warehouse)
+    if (filters.category && filters.category !== 'all') params.append('category', filters.category)
+    if (filters.status && filters.status !== 'all') params.append('status', filters.status)
+    if (filters.month && filters.month !== 'all') params.append('month', filters.month)
+
+    const response = await axios.get(`${API_BASE_URL}/reports/quarterly?${params.toString()}`)
+    return response.data
+  },
+
+  async getMonthlyTrends(filters = {}) {
+    const params = new URLSearchParams()
+    if (filters.warehouse && filters.warehouse !== 'all') params.append('warehouse', filters.warehouse)
+    if (filters.category && filters.category !== 'all') params.append('category', filters.category)
+    if (filters.status && filters.status !== 'all') params.append('status', filters.status)
+    if (filters.month && filters.month !== 'all') params.append('month', filters.month)
+
+    const response = await axios.get(`${API_BASE_URL}/reports/monthly-trends?${params.toString()}`)
+    return response.data
+  },
+
   async getDashboardSummary(filters = {}) {
     const params = new URLSearchParams()
     if (filters.warehouse && filters.warehouse !== 'all') params.append('warehouse', filters.warehouse)
diff --git a/client/src/locales/en.js b/client/src/locales/en.js
index 03a58fe6..576312b0 100644
--- a/client/src/locales/en.js
+++ b/client/src/locales/en.js
@@ -6,6 +6,7 @@ export default {
     orders: 'Orders',
     finance: 'Finance',
     demandForecast: 'Demand Forecast',
+    reports: 'Reports',
     companyName: 'Catalyst Components',
     subtitle: 'Inventory Management System'
   },
@@ -188,6 +189,59 @@ export default {
     }
   },
 
+  // Reports
+  reports: {
+    title: 'Performance Reports',
+    description: 'View quarterly performance metrics and monthly trends',
+    loading: 'Loading reports...',
+    quarterlyPerformance: 'Quarterly Performance',
+    monthlyRevenueTrend: 'Monthly Revenue Trend',
+    monthOverMonth: 'Month-over-Month Analysis',
+    table: {
+      quarter: 'Quarter',
+      totalOrders: 'Total Orders',
+      totalRevenue: 'Total Revenue',
+      avgOrderValue: 'Avg Order Value',
+      fulfillmentRate: 'Fulfillment Rate',
+      month: 'Month',
+      orders: 'Orders',
+      revenue: 'Revenue',
+      change: 'Change',
+      growthRate: 'Growth Rate'
+    },
+    stats: {
+      totalRevenueYTD: 'Total Revenue (YTD)',
+      avgMonthlyRevenue: 'Avg Monthly Revenue',
+      totalOrdersYTD: 'Total Orders (YTD)',
+      bestQuarter: 'Best Performing Quarter'
+    }
+  },
+
+  // Backlog
+  backlog: {
+    title: 'Backlog Management',
+    description: 'Track and resolve inventory shortages',
+    loading: 'Loading backlog...',
+    highPriority: 'High Priority',
+    mediumPriority: 'Medium Priority',
+    lowPriority: 'Low Priority',
+    totalBacklogItems: 'Total Backlog Items',
+    backlogItems: 'Backlog Items',
+    noItems: 'No backlog items - all orders can be fulfilled!',
+    unitsShort: 'units short',
+    days: 'days',
+    table: {
+      orderId: 'Order ID',
+      sku: 'SKU',
+      itemName: 'Item Name',
+      quantityNeeded: 'Quantity Needed',
+      quantityAvailable: 'Quantity Available',
+      shortage: 'Shortage',
+      daysDelayed: 'Days Delayed',
+      priority: 'Priority'
+    }
+  },
+
   // Filters
   filters: {
     timePeriod: 'Time Period',
diff --git a/client/src/locales/ja.js b/client/src/locales/ja.js
index db33223a..9b84d196 100644
--- a/client/src/locales/ja.js
+++ b/client/src/locales/ja.js
@@ -6,6 +6,7 @@ export default {
     orders: '注文',
     finance: '財務',
     demandForecast: '需要予測',
+    reports: 'レポート',
     companyName: '触媒コンポーネンツ',
     subtitle: '在庫管理システム'
   },
@@ -188,6 +189,59 @@ export default {
     }
   },
 
+  // Reports
+  reports: {
+    title: 'パフォーマンスレポート',
+    description: '四半期パフォーマンス指標と月次トレンドを表示',
+    loading: 'レポートを読み込み中...',
+    quarterlyPerformance: '四半期パフォーマンス',
+    monthlyRevenueTrend: '月次収益トレンド',
+    monthOverMonth: '前月比分析',
+    table: {
+      quarter: '四半期',
+      totalOrders: '総注文数',
+      totalRevenue: '総収益',
+      avgOrderValue: '平均注文額',
+      fulfillmentRate: '履行率',
+      month: '月',
+      orders: '注文数',
+      revenue: '収益',
+      change: '変化',
+      growthRate: '成長率'
+    },
+    stats: {
+      totalRevenueYTD: '総収益（年初来）',
+      avgMonthlyRevenue: '平均月次収益',
+      totalOrdersYTD: '総注文数（年初来）',
+      bestQuarter: '最高業績の四半期'
+    }
+  },
+
+  // Backlog
+  backlog: {
+    title: 'バックログ管理',
+    description: '在庫不足を追跡し解決する',
+    loading: 'バックログを読み込み中...',
+    highPriority: '高優先度',
+    mediumPriority: '中優先度',
+    lowPriority: '低優先度',
+    totalBacklogItems: '総バックログ項目数',
+    backlogItems: 'バックログ項目',
+    noItems: 'バックログ項目はありません - すべての注文が履行可能です！',
+    unitsShort: '個不足',
+    days: '日',
+    table: {
+      orderId: '注文ID',
+      sku: 'SKU',
+      itemName: '品目名',
+      quantityNeeded: '必要数量',
+      quantityAvailable: '利用可能数量',
+      shortage: '不足',
+      daysDelayed: '遅延日数',
+      priority: '優先度'
+    }
+  },
+
   // Filters
   filters: {
     timePeriod: '期間',
diff --git a/client/src/views/Backlog.vue b/client/src/views/Backlog.vue
index bb3bac21..adbfd99f 100644
--- a/client/src/views/Backlog.vue
+++ b/client/src/views/Backlog.vue
@@ -1,53 +1,53 @@
 <template>
   <div class="backlog">
     <div class="page-header">
-      <h2>Backlog Management</h2>
-      <p>Track and resolve inventory shortages</p>
+      <h2>{{ t('backlog.title') }}</h2>
+      <p>{{ t('backlog.description') }}</p>
     </div>
 
-    <div v-if="loading" class="loading">Loading backlog...</div>
+    <div v-if="loading" class="loading">{{ t('backlog.loading') }}</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else>
       <div class="stats-grid">
         <div class="stat-card danger">
-          <div class="stat-label">High Priority</div>
+          <div class="stat-label">{{ t('backlog.highPriority') }}</div>
           <div class="stat-value">{{ getBacklogByPriority('high').length }}</div>
         </div>
         <div class="stat-card warning">
-          <div class="stat-label">Medium Priority</div>
+          <div class="stat-label">{{ t('backlog.mediumPriority') }}</div>
           <div class="stat-value">{{ getBacklogByPriority('medium').length }}</div>
         </div>
         <div class="stat-card info">
-          <div class="stat-label">Low Priority</div>
+          <div class="stat-label">{{ t('backlog.lowPriority') }}</div>
           <div class="stat-value">{{ getBacklogByPriority('low').length }}</div>
         </div>
         <div class="stat-card">
-          <div class="stat-label">Total Backlog Items</div>
+          <div class="stat-label">{{ t('backlog.totalBacklogItems') }}</div>
           <div class="stat-value">{{ backlogItems.length }}</div>
         </div>
       </div>
 
       <div class="card">
         <div class="card-header">
-          <h3 class="card-title">Backlog Items</h3>
+          <h3 class="card-title">{{ t('backlog.backlogItems') }}</h3>
         </div>
         <div v-if="backlogItems.length === 0" style="padding: 3rem; text-align: center;">
           <p style="font-size: 1.125rem; color: #10b981; font-weight: 600;">
-            ✓ No backlog items - all orders can be fulfilled!
+            ✓ {{ t('backlog.noItems') }}
           </p>
         </div>
         <div v-else class="table-container">
           <table>
             <thead>
               <tr>
-                <th>Order ID</th>
-                <th>SKU</th>
-                <th>Item Name</th>
-                <th>Quantity Needed</th>
-                <th>Quantity Available</th>
-                <th>Shortage</th>
-                <th>Days Delayed</th>
-                <th>Priority</th>
+                <th>{{ t('backlog.table.orderId') }}</th>
+                <th>{{ t('backlog.table.sku') }}</th>
+                <th>{{ t('backlog.table.itemName') }}</th>
+                <th>{{ t('backlog.table.quantityNeeded') }}</th>
+                <th>{{ t('backlog.table.quantityAvailable') }}</th>
+                <th>{{ t('backlog.table.shortage') }}</th>
+                <th>{{ t('backlog.table.daysDelayed') }}</th>
+                <th>{{ t('backlog.table.priority') }}</th>
               </tr>
             </thead>
             <tbody>
@@ -59,17 +59,17 @@
                 <td>{{ item.quantity_available }}</td>
                 <td>
                   <span class="badge danger">
-                    {{ item.quantity_needed - item.quantity_available }} units short
+                    {{ item.quantity_needed - item.quantity_available }} {{ t('backlog.unitsShort') }}
                   </span>
                 </td>
                 <td>
                   <span :style="{ color: item.days_delayed > 7 ? '#ef4444' : '#f59e0b' }">
-                    {{ item.days_delayed }} days
+                    {{ item.days_delayed }} {{ t('backlog.days') }}
                   </span>
                 </td>
                 <td>
                   <span :class="['badge', item.priority]">
-                    {{ item.priority }}
+                    {{ translatePriority(item.priority) }}
                   </span>
                 </td>
               </tr>
@@ -85,6 +85,7 @@
 import { ref, onMounted, watch, computed } from 'vue'
 import { api } from '../api'
 import { useFilters } from '../composables/useFilters'
+import { useI18n } from '../composables/useI18n'
 
 export default {
   name: 'Backlog',
@@ -94,6 +95,16 @@ export default {
     const allBacklogItems = ref([])
     const inventoryItems = ref([])
 
+    const { t } = useI18n()
+
+    const translatePriority = (priority) => {
+      const map = {
+        high: t('priority.high'), medium: t('priority.medium'), low: t('priority.low'),
+        High: t('priority.high'), Medium: t('priority.medium'), Low: t('priority.low')
+      }
+      return map[priority] || priority
+    }
+
     // Use shared filters
     const { selectedLocation, selectedCategory, getCurrentFilters } = useFilters()
 
@@ -142,6 +153,8 @@ export default {
     onMounted(loadBacklog)
 
     return {
+      t,
+      translatePriority,
       loading,
       error,
       backlogItems,
diff --git a/client/src/views/Reports.vue b/client/src/views/Reports.vue
index 35187eaf..e33bb455 100644
--- a/client/src/views/Reports.vue
+++ b/client/src/views/Reports.vue
@@ -1,35 +1,35 @@
 <template>
   <div class="reports">
     <div class="page-header">
-      <h2>Performance Reports</h2>
-      <p>View quarterly performance metrics and monthly trends</p>
+      <h2>{{ t('reports.title') }}</h2>
+      <p>{{ t('reports.description') }}</p>
     </div>
 
-    <div v-if="loading" class="loading">Loading reports...</div>
+    <div v-if="loading" class="loading">{{ t('reports.loading') }}</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else>
       <!-- Quarterly Performance -->
       <div class="card">
         <div class="card-header">
-          <h3 class="card-title">Quarterly Performance</h3>
+          <h3 class="card-title">{{ t('reports.quarterlyPerformance') }}</h3>
         </div>
         <div class="table-container">
           <table class="reports-table">
             <thead>
               <tr>
-                <th>Quarter</th>
-                <th>Total Orders</th>
-                <th>Total Revenue</th>
-                <th>Avg Order Value</th>
-                <th>Fulfillment Rate</th>
+                <th>{{ t('reports.table.quarter') }}</th>
+                <th>{{ t('reports.table.totalOrders') }}</th>
+                <th>{{ t('reports.table.totalRevenue') }}</th>
+                <th>{{ t('reports.table.avgOrderValue') }}</th>
+                <th>{{ t('reports.table.fulfillmentRate') }}</th>
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(q, index) in quarterlyData" :key="index">
+              <tr v-for="q in quarterlyData" :key="q.quarter">
                 <td><strong>{{ q.quarter }}</strong></td>
                 <td>{{ q.total_orders }}</td>
-                <td>${{ formatNumber(q.total_revenue) }}</td>
-                <td>${{ formatNumber(q.avg_order_value) }}</td>
+                <td>{{ formatCurrency(q.total_revenue, selectedCurrency) }}</td>
+                <td>{{ formatCurrency(q.avg_order_value, selectedCurrency) }}</td>
                 <td>
                   <span :class="getFulfillmentClass(q.fulfillment_rate)">
                     {{ q.fulfillment_rate }}%
@@ -44,16 +44,16 @@
       <!-- Monthly Trends Chart -->
       <div class="card">
         <div class="card-header">
-          <h3 class="card-title">Monthly Revenue Trend</h3>
+          <h3 class="card-title">{{ t('reports.monthlyRevenueTrend') }}</h3>
         </div>
         <div class="chart-container">
           <div class="bar-chart">
-            <div v-for="(month, index) in monthlyData" :key="index" class="bar-wrapper">
+            <div v-for="month in monthlyData" :key="month.month" class="bar-wrapper">
               <div class="bar-container">
                 <div
                   class="bar"
                   :style="{ height: getBarHeight(month.revenue) + 'px' }"
-                  :title="'$' + formatNumber(month.revenue)"
+                  :title="formatCurrency(month.revenue, selectedCurrency)"
                 ></div>
               </div>
               <div class="bar-label">{{ formatMonth(month.month) }}</div>
@@ -65,33 +65,33 @@
       <!-- Month-over-Month Comparison -->
       <div class="card">
         <div class="card-header">
-          <h3 class="card-title">Month-over-Month Analysis</h3>
+          <h3 class="card-title">{{ t('reports.monthOverMonth') }}</h3>
         </div>
         <div class="table-container">
           <table class="reports-table">
             <thead>
               <tr>
-                <th>Month</th>
-                <th>Orders</th>
-                <th>Revenue</th>
-                <th>Change</th>
-                <th>Growth Rate</th>
+                <th>{{ t('reports.table.month') }}</th>
+                <th>{{ t('reports.table.orders') }}</th>
+                <th>{{ t('reports.table.revenue') }}</th>
+                <th>{{ t('reports.table.change') }}</th>
+                <th>{{ t('reports.table.growthRate') }}</th>
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(month, index) in monthlyData" :key="index">
+              <tr v-for="(month, i) in monthlyData" :key="month.month">
                 <td><strong>{{ formatMonth(month.month) }}</strong></td>
                 <td>{{ month.order_count }}</td>
-                <td>${{ formatNumber(month.revenue) }}</td>
+                <td>{{ formatCurrency(month.revenue, selectedCurrency) }}</td>
                 <td>
-                  <span v-if="index > 0" :class="getChangeClass(month.revenue, monthlyData[index - 1].revenue)">
-                    {{ getChangeValue(month.revenue, monthlyData[index - 1].revenue) }}
+                  <span v-if="i > 0" :class="getChangeClass(month.revenue, monthlyData[i - 1].revenue)">
+                    {{ getChangeValue(month.revenue, monthlyData[i - 1].revenue) }}
                   </span>
                   <span v-else>-</span>
                 </td>
                 <td>
-                  <span v-if="index > 0" :class="getChangeClass(month.revenue, monthlyData[index - 1].revenue)">
-                    {{ getGrowthRate(month.revenue, monthlyData[index - 1].revenue) }}
+                  <span v-if="i > 0" :class="getChangeClass(month.revenue, monthlyData[i - 1].revenue)">
+                    {{ getGrowthRate(month.revenue, monthlyData[i - 1].revenue) }}
                   </span>
                   <span v-else>-</span>
                 </td>
@@ -104,19 +104,19 @@
       <!-- Summary Stats -->
       <div class="stats-grid">
         <div class="stat-card">
-          <div class="stat-label">Total Revenue (YTD)</div>
-          <div class="stat-value">${{ formatNumber(totalRevenue) }}</div>
+          <div class="stat-label">{{ t('reports.stats.totalRevenueYTD') }}</div>
+          <div class="stat-value">{{ formatCurrency(totalRevenue, selectedCurrency) }}</div>
         </div>
         <div class="stat-card">
-          <div class="stat-label">Avg Monthly Revenue</div>
-          <div class="stat-value">${{ formatNumber(avgMonthlyRevenue) }}</div>
+          <div class="stat-label">{{ t('reports.stats.avgMonthlyRevenue') }}</div>
+          <div class="stat-value">{{ formatCurrency(avgMonthlyRevenue, selectedCurrency) }}</div>
         </div>
         <div class="stat-card">
-          <div class="stat-label">Total Orders (YTD)</div>
+          <div class="stat-label">{{ t('reports.stats.totalOrdersYTD') }}</div>
           <div class="stat-value">{{ totalOrders }}</div>
         </div>
         <div class="stat-card">
-          <div class="stat-label">Best Performing Quarter</div>
+          <div class="stat-label">{{ t('reports.stats.bestQuarter') }}</div>
           <div class="stat-value">{{ bestQuarter }}</div>
         </div>
       </div>
@@ -125,192 +125,136 @@
 </template>
 
 <script>
-import axios from 'axios'
+import { ref, computed, watch, onMounted } from 'vue'
+import { api } from '../api'
+import { useFilters } from '../composables/useFilters'
+import { useI18n } from '../composables/useI18n'
+import { formatCurrency } from '../utils/currency'
 
 export default {
   name: 'Reports',
-  data() {
-    return {
-      loading: true,
-      error: null,
-      quarterlyData: [],
-      monthlyData: [],
-      totalRevenue: 0,
-      avgMonthlyRevenue: 0,
-      totalOrders: 0,
-      bestQuarter: ''
-    }
-  },
-  mounted() {
-    console.log('Reports component mounted')
-    this.loadData()
-  },
-  methods: {
-    async loadData() {
-      console.log('Loading reports data...')
+  setup() {
+    const { t, currentCurrency, currentLocale } = useI18n()
+    const {
+      selectedPeriod,
+      selectedLocation,
+      selectedCategory,
+      selectedStatus,
+      getCurrentFilters
+    } = useFilters()
+
+    const loading = ref(true)
+    const error = ref(null)
+    const quarterlyData = ref([])
+    const monthlyData = ref([])
+
+    const loadData = async () => {
+      loading.value = true
+      error.value = null
       try {
-        this.loading = true
-
-        // Fetch quarterly data
-        console.log('Fetching quarterly data...')
-        const quarterlyResponse = await axios.get('http://localhost:8001/api/reports/quarterly')
-        this.quarterlyData = quarterlyResponse.data
-        console.log('Quarterly data:', this.quarterlyData)
-
-        // Fetch monthly data
-        console.log('Fetching monthly data...')
-        const monthlyResponse = await axios.get('http://localhost:8001/api/reports/monthly-trends')
-        this.monthlyData = monthlyResponse.data
-        console.log('Monthly data:', this.monthlyData)
-
-        // Calculate summary stats
-        console.log('Calculating summary stats...')
-        this.calculateSummaryStats()
-        console.log('Summary stats calculated')
-
+        const filters = getCurrentFilters()
+        const [quarterly, monthly] = await Promise.all([
+          api.getQuarterlyReports(filters),
+          api.getMonthlyTrends(filters)
+        ])
+        quarterlyData.value = quarterly
+        monthlyData.value = monthly
       } catch (err) {
-        console.log('Error loading reports:', err)
-        this.error = 'Failed to load reports: ' + err.message
+        error.value = 'Failed to load reports: ' + err.message
       } finally {
-        this.loading = false
-        console.log('Loading complete')
-      }
-    },
-
-    calculateSummaryStats() {
-      // Calculate total revenue
-      var total = 0
-      for (var i = 0; i < this.monthlyData.length; i++) {
-        total = total + this.monthlyData[i].revenue
-      }
-      this.totalRevenue = total
-
-      // Calculate average monthly revenue
-      if (this.monthlyData.length > 0) {
-        this.avgMonthlyRevenue = total / this.monthlyData.length
-      } else {
-        this.avgMonthlyRevenue = 0
-      }
-
-      // Calculate total orders
-      var orders = 0
-      for (var i = 0; i < this.monthlyData.length; i++) {
-        orders = orders + this.monthlyData[i].order_count
-      }
-      this.totalOrders = orders
-
-      // Find best quarter
-      var bestQ = ''
-      var bestRevenue = 0
-      for (var i = 0; i < this.quarterlyData.length; i++) {
-        if (this.quarterlyData[i].total_revenue > bestRevenue) {
-          bestRevenue = this.quarterlyData[i].total_revenue
-          bestQ = this.quarterlyData[i].quarter
-        }
-      }
-      this.bestQuarter = bestQ
-    },
-
-    formatNumber(num) {
-      console.log('Formatting number:', num)
-      // Format number with commas
-      var str = num.toString()
-      var parts = str.split('.')
-      var intPart = parts[0]
-      var decPart = parts.length > 1 ? parts[1] : '00'
-
-      var formatted = ''
-      var count = 0
-      for (var i = intPart.length - 1; i >= 0; i--) {
-        if (count > 0 && count % 3 === 0) {
-          formatted = ',' + formatted
-        }
-        formatted = intPart[i] + formatted
-        count++
+        loading.value = false
       }
+    }
 
-      if (decPart.length === 1) {
-        decPart = decPart + '0'
-      }
-      if (decPart.length > 2) {
-        decPart = decPart.substring(0, 2)
-      }
+    watch([selectedPeriod, selectedLocation, selectedCategory, selectedStatus], loadData)
+    onMounted(loadData)
+
+    // Computed summary stats
+    const totalRevenue = computed(() => {
+      return monthlyData.value.reduce((sum, m) => sum + (m.revenue || 0), 0)
+    })
+
+    const avgMonthlyRevenue = computed(() => {
+      const len = monthlyData.value.length
+      return len > 0 ? totalRevenue.value / len : 0
+    })
+
+    const totalOrders = computed(() => {
+      return monthlyData.value.reduce((sum, m) => sum + (m.order_count || 0), 0)
+    })
+
+    const bestQuarter = computed(() => {
+      if (quarterlyData.value.length === 0) return '-'
+      return quarterlyData.value.reduce((best, q) => {
+        return q.total_revenue > best.total_revenue ? q : best
+      }, quarterlyData.value[0]).quarter
+    })
+
+    // O(1) max revenue computed once
+    const maxRevenue = computed(() => {
+      if (monthlyData.value.length === 0) return 1
+      return Math.max(...monthlyData.value.map(m => m.revenue || 0)) || 1
+    })
+
+    const getBarHeight = (revenue) => {
+      return (revenue / maxRevenue.value) * 200
+    }
 
-      return formatted + '.' + decPart
-    },
-
-    formatMonth(monthStr) {
-      console.log('Formatting month:', monthStr)
-      // Convert YYYY-MM to readable format
-      var parts = monthStr.split('-')
-      var year = parts[0]
-      var month = parts[1]
-
-      var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-      var monthIndex = parseInt(month) - 1
-
-      return monthNames[monthIndex] + ' ' + year
-    },
-
-    getBarHeight(revenue) {
-      console.log('Calculating bar height for revenue:', revenue)
-      // Calculate bar height (max height 200px)
-      var maxRevenue = 0
-      for (var i = 0; i < this.monthlyData.length; i++) {
-        if (this.monthlyData[i].revenue > maxRevenue) {
-          maxRevenue = this.monthlyData[i].revenue
-        }
-      }
+    const getFulfillmentClass = (rate) => {
+      if (rate >= 90) return 'badge success'
+      if (rate >= 75) return 'badge warning'
+      return 'badge danger'
+    }
 
-      if (maxRevenue === 0) {
-        return 0
-      }
+    const getChangeValue = (current, previous) => {
+      const change = current - previous
+      if (change === 0) return formatCurrency(0, currentCurrency.value)
+      const sign = change > 0 ? '+' : '-'
+      return sign + formatCurrency(Math.abs(change), currentCurrency.value)
+    }
 
-      var height = (revenue / maxRevenue) * 200
-      return height
-    },
-
-    getFulfillmentClass(rate) {
-      if (rate >= 90) {
-        return 'badge success'
-      } else if (rate >= 75) {
-        return 'badge warning'
-      } else {
-        return 'badge danger'
-      }
-    },
-
-    getChangeValue(current, previous) {
-      var change = current - previous
-      if (change > 0) {
-        return '+$' + this.formatNumber(change)
-      } else if (change < 0) {
-        return '-$' + this.formatNumber(Math.abs(change))
-      } else {
-        return '$0.00'
-      }
-    },
-
-    getChangeClass(current, previous) {
-      var change = current - previous
-      if (change > 0) {
-        return 'positive-change'
-      } else if (change < 0) {
-        return 'negative-change'
-      } else {
-        return ''
-      }
-    },
+    const getChangeClass = (current, previous) => {
+      const change = current - previous
+      if (change > 0) return 'positive-change'
+      if (change < 0) return 'negative-change'
+      return ''
+    }
 
-    getGrowthRate(current, previous) {
-      if (previous === 0) {
-        return 'N/A'
-      }
+    const getGrowthRate = (current, previous) => {
+      if (!previous) return 'N/A'
+      const rate = ((current - previous) / previous) * 100
+      return (rate > 0 ? '+' : '') + rate.toFixed(1) + '%'
+    }
 
-      var rate = ((current - previous) / previous) * 100
-      var sign = rate > 0 ? '+' : ''
+    const formatMonth = (monthStr) => {
+      if (!monthStr) return ''
+      const parts = monthStr.split('-')
+      if (parts.length < 2) return monthStr
+      const year = parseInt(parts[0], 10)
+      const month = parseInt(parts[1], 10) - 1
+      if (isNaN(year) || isNaN(month) || month < 0 || month > 11) return monthStr
+      const locale = currentLocale.value === 'ja' ? 'ja-JP' : 'en-US'
+      return new Date(year, month).toLocaleDateString(locale, { month: 'short', year: 'numeric' })
+    }
 
-      return sign + rate.toFixed(1) + '%'
+    return {
+      t,
+      loading,
+      error,
+      quarterlyData,
+      monthlyData,
+      totalRevenue,
+      avgMonthlyRevenue,
+      totalOrders,
+      bestQuarter,
+      getBarHeight,
+      getFulfillmentClass,
+      getChangeValue,
+      getChangeClass,
+      getGrowthRate,
+      formatMonth,
+      formatCurrency,
+      selectedCurrency: currentCurrency
     }
   }
 }
diff --git a/server/main.py b/server/main.py
index a0c2d8c5..2f219602 100644
--- a/server/main.py
+++ b/server/main.py
@@ -228,12 +228,21 @@ def get_recent_transactions():
     return recent_transactions
 
 @app.get("/api/reports/quarterly")
-def get_quarterly_reports():
-    """Get quarterly performance reports"""
+def get_quarterly_reports(
+    warehouse: Optional[str] = None,
+    category: Optional[str] = None,
+    status: Optional[str] = None,
+    month: Optional[str] = None
+):
+    """Get quarterly performance reports with optional filtering"""
+    # Apply the same global filters used across the app before aggregating
+    filtered_orders = apply_filters(orders, warehouse, category, status)
+    filtered_orders = filter_by_month(filtered_orders, month)
+
     # Calculate quarterly statistics from orders
     quarters = {}
 
-    for order in orders:
+    for order in filtered_orders:
         order_date = order.get('order_date', '')
         # Determine quarter
         if '2025-01' in order_date or '2025-02' in order_date or '2025-03' in order_date:
@@ -274,11 +283,20 @@ def get_quarterly_reports():
     return result
 
 @app.get("/api/reports/monthly-trends")
-def get_monthly_trends():
-    """Get month-over-month trends"""
+def get_monthly_trends(
+    warehouse: Optional[str] = None,
+    category: Optional[str] = None,
+    status: Optional[str] = None,
+    month: Optional[str] = None
+):
+    """Get month-over-month trends with optional filtering"""
+    # Apply the same global filters used across the app before aggregating
+    filtered_orders = apply_filters(orders, warehouse, category, status)
+    filtered_orders = filter_by_month(filtered_orders, month)
+
     months = {}
 
-    for order in orders:
+    for order in filtered_orders:
         order_date = order.get('order_date', '')
         if not order_date:
             continue