fix: Reports page i18n, filters, and console spam#56
Open
alanaqrawiacn wants to merge 2 commits into
Open
Conversation
Redesigns the app layout from a horizontal top navigation bar to a SaaS-style fixed vertical sidebar (220px, #0f172a background). - Add Sidebar.vue with 6 nav links (SVG icons, active route detection), logo block, and ProfileMenu/LanguageSwitcher pinned at the bottom - Rewrite App.vue layout to flex-direction: row with sidebar + app-body - Update FilterBar.vue: top offset 70px → 0, remove max-width constraint - Add docs/architecture.html: tech stack, data flow, API endpoints - Add .claude/commands/sidebar-redesign.md custom skill Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
The Reports view had drifted away from every codebase convention and
was silently broken. This commit brings it back in line with the other
views (Orders, Dashboard) and makes the filter bar actually affect it.
Changes:
- Reports.vue: full rewrite from Options API to Composition API
- Import useI18n, useFilters, centralized api client
- Watch all 4 filter refs to reload data on change
- Replace hardcoded English strings with t('reports.*') keys
- Replace direct axios calls with api.getReportsQuarterly/getReportsMonthlyTrends
- Remove 12+ console.log calls (formatNumber/formatMonth/getBarHeight
were logging on every render); keep a single console.error on failure
- Use toLocaleString for number formatting; wire currencySymbol to
currentCurrency so ¥ shows under ja locale
- Fix timezone offset bug in formatMonth: parse YYYY-MM into a
local-time Date instead of ISO string so "2025-01" no longer renders
as "Dec 2024" in UTC-offset zones
- Replace v-for :key="index" with stable keys (q.quarter, month.month)
- Sidebar.vue: Reports label uses t('nav.reports') instead of the
hardcoded 'Reports' string (rest of nav already used the getter)
- locales/{en,ja}.js: add nav.reports and full reports.* translation tree
- api.js: add getReportsQuarterly(filters) and getReportsMonthlyTrends(filters)
- server/main.py: /api/reports/quarterly and /api/reports/monthly-trends
now accept warehouse/category/status/month via the existing
apply_filters + filter_by_month helpers
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The Reports view had silently drifted away from every codebase convention (Options API, raw axios, hardcoded English strings,
:key="index", 12+console.logcalls firing on every render), and the global filter bar did not affect it at all. This PR brings it in line withOrders.vue/Dashboard.vueand makes the filters work end-to-end.Changes
Frontend
views/Reports.vue— full rewritesetup()withref/computed/watch/onMounted)useI18n()for all user-facing stringsuseFilters()composable +watchonselectedPeriod/selectedLocation/selectedCategory/selectedStatusto reload on filter changeaxioscalls → centralizedapi.getReportsQuarterly(filters)/api.getReportsMonthlyTrends(filters)console.lognoise; kept oneconsole.errorin catchformatNumberloop →toLocaleString, withcurrencySymbol(¥ vs $) driven bycurrentCurrencyformatMonthrewritten to use a local-timenew Date(year, monthIndex, 1)so2025-01no longer drifts toDec 2024in UTC-offset zonesv-for :key="index"→ stable keys (q.quarter,month.month)components/Sidebar.vue— line 87:label: Reports→get label() { return t(nav.reports) }(matches the getter pattern used by every other nav item)locales/en.js/locales/ja.js— addednav.reportsand a fullreports.*translation tree (title, description, quarterly., monthlyTrend.title, monthOverMonth., stats.*)api.js— addedgetReportsQuarterly(filters)andgetReportsMonthlyTrends(filters)that serializewarehouse/category/status/monthquery params like the other filtered endpointsBackend
server/main.py—/api/reports/quarterlyand/api/reports/monthly-trendsnow acceptwarehouse/category/status/monthquery params and apply them via the existingapply_filters+filter_by_monthhelpersTest plan
日本語— entire Reports page (headers, table columns, stat labels, sidebarレポートlink) renders in Japanese; currency flips to ¥. Toggle back to English — reverts.January— Reports narrows to a single Q1-2025 row (18 orders, $1,993,655.74 revenue), bar chart to one bar, month-over-month table to one row. Set back toAll Months— everything returns./api/tasks404s from App.vue remain.🤖 Generated with Claude Code