- Remove nested overflow and fixed height classes (`max-h-[75vh]`, `overflow-y-auto`) from the inner modal container to fix the double scrollbar UI glitch.
- Adjust the Modal `size` property to a supported type to resolve TypeScript compilation errors.
- Ensure a cleaner, more seamless scrolling experience for the diagnosis result pop-up.
- Move the `onClick` event handler from the accordion header to the outermost card container in `catalog-page.tsx`.
- Allow users to click anywhere on the expanded card (including the description and treatment sections) to collapse it.
- Improve overall user experience by providing a significantly larger tap target, especially beneficial for mobile or touch-screen users.
- Import `diseaseCatalogSeed` to use as a fallback data source in `catalog-page.tsx`.
- Implement logic to merge backend API responses with local seed data, ensuring `imageUrl` and `medicineRecommendations` are populated.
- Fix an issue where disease images and specific treatments were not rendering due to missing fields in the database payload.
- Enhance UI resilience by displaying accurate visual and medical data without requiring immediate backend updates.
- Convert static PNG image assets to WebP format and remove old PNG files to significantly reduce image payload size and improve page load performance.
- Enhance overall UI resilience and frontend speed.
- Import `useUiStore` into `main-layout.tsx` to access the global sidebar state.
- Add an `onClick` event listener to the main content wrapper.
- Automatically close the sidebar if it is expanded and the user clicks outside of it.
- Enhance overall UX by providing a more intuitive, frictionless way to dismiss the navigation menu.
- Update the `onClick` handler for navigation links in `sidebar.tsx` to use `!isSidebarOpen` instead of a hardcoded boolean.
- Enable navigation items to act as smart toggles: expanding the sidebar when clicked in collapsed mode, and collapsing it when clicked in expanded mode.
- Improve overall user experience by reducing the need to manually click the main toggle button.
- Move `isSidebarOpen` state from local component (`useState`) to global Zustand store (`ui-store.ts`).
- Fix an issue where the sidebar would incorrectly reset to its default closed state when navigating between routes (e.g., to the Telemetry page) due to component remounting.
- Ensure consistent sidebar toggle behavior across the entire dashboard application.
- Update `isSidebarOpen` initial state from true to false in `sidebar.tsx`.
- Ensure the sidebar starts in a mini/collapsed mode when the dashboard is first loaded to provide more space for the main content.
- Import `Date` object to dynamically fetch the current year for the copyright notice.
- Ensure the footer always displays the correct year without manual updates.
- Sync `MobileNav` items and icons with desktop `Sidebar` for consistency.
- Standardize menu icons using `lucide-react` across all navigation components.
- Add a spacer div in `main-layout.tsx` to ensure proper bottom spacing between content and the fixed footer.
- Remove redundant 'aria-hidden' attribute in `MobileNav` to fix accessibility warnings.
- Fix 'Logout' button layout in mobile menu for better responsiveness.
- Introduce `showPassword` state in the `AuthForm` component to allow users to show or hide their password.
- Implement `Eye` and `EyeOff` icons from `lucide-react` for the toggle button UI.
- Change password input type dynamically between 'password' and 'text'.
- Clean up unused `eye` icon import from `login-page.tsx`.
- Create a new `Sidebar` component for desktop with collapse/mini-sidebar feature.
- Rename `navbar.tsx` to `mobile-header.tsx` to better reflect its mobile-specific purpose.
- Synchronize icons (from lucide-react) and menu labels between desktop `Sidebar` and touch-based `MobileNav`.
- Fix 'Logout' button sizing in the mobile menu by removing forced margins for better responsiveness on narrow screens.
- Remove conflicting 'aria-hidden' attribute in MobileNav to resolve browser accessibility (a11y) warnings.
- Add a spacer in `main-layout.tsx` to prevent the bottom content from being overlapped by the fixed Footer.
Introduce a `valueFormatter` prop to the `ChartCard` component to allow
customized data presentation in tooltips. This enables more readable
units for specific metrics, such as converting bytes to MiB or
seconds to milliseconds.
Rewrite the telemetry page logic to bypass the custom proxy API in
favor of direct Prometheus queries.
- Implement `queryRange` and `queryInstant` helpers for Prometheus API
- Replace `TelemetryAPI` client with direct fetch calls to Prometheus
- Update data fetching logic to use standard Prometheus query parameters
- Simplify state management and data transformation for charts
Add a comprehensive telemetry dashboard page featuring real-time
system statistics and metric visualization using recharts.
- Integrate recharts for area and bar chart rendering
- Implement TelemetryAPI client for stats, discovery, and chart data
- Add dashboard UI with stat cards and responsive charts
- Remove legacy nginx sub_filter proxy configuration in favor of
direct API communication to telemetry.imrnes.team
- Add LogoutProses function in app.tsx to destroy session via apiClient.logout() and clear user state
- Apply <AuthGuard> to private routes (/dashboard, /scan, /expert/reviews, etc.) to prevent unauthorized access
- Update the "Logout" button design in Navbar and MobileNav with a red accent and LogOut icon
- Fix vulnerability allowing direct URL access to the dashboard by bypassing login
Transition telemetry dashboard integration from an external URL approach to a local reverse proxy via Nginx. This simplifies client-side connectivity by routing all telemetry requests through the existing web server's domain.
- Configure Nginx to proxy `/telemetry/` sub-paths to the internal telemetry service
- Implement `sub_filter` in Nginx to rewrite root-relative paths for the SPA
- Remove `VITE_TELEMETRY_URL` build arguments and environment variable dependencies
- Simplify `TelemetryPage` to use a relative `/telemetry` base path
- Clean up deployment workflows and Dockerfile by removing unused telemetry build args
Replace the hardcoded Nginx proxy configuration with a dynamic environment variable approach. This allows the telemetry dashboard to be loaded via a public URL instead of relying on a local Tailscale proxy.
- Add `VITE_TELEMETRY_URL` build argument to Dockerfile
- Pass `VITE_TELEMETRY_URL` through GitHub Actions deployment workflow
- Remove `/telemetry/` location block from nginx.conf
- Update `TelemetryPage` to use the new environment variable and improve iframe loading state management
- mobile-nav: add 'review' path to NAV_ITEMS array to ensure the menu is accessible on mobile screens.
- scan-page: update background color and border radius of the guidelines card in the right sidebar.
- app & navbar: comment out login, register, and logout features.
- scan-page: align info cards vertically and reduce upload area padding.
- mobile-nav: implement React Portal to fix overlapping menu issue.
- Remove userRole prop, read user directly from auth store
- Add user info section (avatar, name, email) when logged in
- Add Masuk/Daftar buttons at bottom when unauthenticated
- Add Keluar button with loading state when authenticated
- Add tagline under logo in sidebar header
- Add backdrop blur effect for better visual depth
- Use flex-col layout for consistent spacing at any height
- Add conditional button behavior based on file selection state
- Before file selected: button opens file picker
- After file selected: button triggers file upload to API
- Show "Mengunggah..." text and disable button during upload
- Display error messages below button when upload fails
This fixes the issue where users could select files but had no way
to submit them for analysis.
- Add flex-wrap and min-w-0 to prevent RiskBadge from overflowing
the card boundary when commonName is long (e.g., Northern/Southern Leaf Blight)
- Fix both catalog-page.tsx and disease-card.tsx for consistency
- Add MainLayout wrapper to /catalog, /catalog/:slug, and /expert/reviews
routes in app.tsx so they share the same navbar and footer as dashboard
- Remove duplicate header/layout/spacing from CatalogPage,
DiseaseDetailPage, and ExpertReviewsPage
- Update ExpertReviewsPage to use consistent space-y layout pattern
matching other pages
- Update CatalogPage to remove outer main wrapper since MainLayout
provides the container
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Make dashboard disease quick-access cards clickable → link to /catalog/:slug
- Update catalog page to match dashboard styling (4-column grid, consistent
card design with colored dot, risk badge, line-clamp summary)
- Add URL param support to catalog (?risk=high) so dashboard's
"Risiko Tinggi" stat card link works
- Remove confusing "Total Penyakit" stat card (was counting catalog rows,
always 4). Replace with "Total Diagnosa" linking to /diagnoses,
"Gagal" stat, and rename "Risiko Tinggi" to "Kategori Risiko Tinggi"
linking to /catalog?risk=high
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Fix auth system: remove redirect bugs in login/register pages, register
routes, wrap protected routes with AuthGuard, add AuthInitializer
- Add missing navbar links (Diagnosa, Pustaka, expert Review)
- Fix DiagnosesPage status filter to match DB DiagnosisStatus enum,
support URL params (?status=, ?risk=) from dashboard links
- Replace hardcoded disease data on Dashboard with API-driven data,
fix layout bugs (invalid gap-57 class, empty Button)
- Rewrite LibraryPage to use API instead of mock-diseases.ts
- Indonesian-ize Expert Reviews page labels and text
- Wrap DiagnosisDetailPage with MainLayout for consistent layout
- Improve ScanPage UX: image preview before upload, lucide icons,
proper disease names in result modal, file size validation
- Delete dead code: mock-diseases.ts, unused form components,
tailwind.config.ts (Tailwind v4 does not read v3 config)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Refactor landing page content and links for better user experience.
- Introduce a new library page to display disease information with filtering and modal details.
- Add a scan page for users to upload images for diagnosis with a preview modal.
- Enhance login and registration pages with automatic navigation to the dashboard.
- Integrate vite-tsconfig-paths for improved path resolution in Vite configuration.
- Updated @moonrepo/cli to version 2.2.5 and typescript to version 6.0.3 in package.json and shared package.json.
- Modified build script in package.json to run shared, api, and web builds.
- Removed unnecessary type and language declarations from shared moon.yml.
- Added ignoreDeprecations option in tsconfig.base.json to handle TypeScript 6.0 deprecations.
- Add proper id/htmlFor associations for verified/corrected radio inputs
- Clear correctedDiseaseSlug when switching verdict to verified to prevent stale state
- Add required={verdict === 'corrected'} to disease select
- Add loading state distinguishing between loading reviews/diseases and empty queue
- Add type="button" to diagnosis list selection buttons
- Improve selected diagnosis image alt text to include disease name
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Track the active object URL in previewUrlRef to ensure the cleanup effect
revokes the correct URL on unmount, avoiding closure over stale state.
When replacing or clearing preview, revoke the ref's current URL and set
it to null. On unmount, revoke previewUrlRef.current if present.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Prevent object URL leaks in image-classification-form by revoking previous preview URL before replacing it, revoking after successful submit, and revoking on component unmount
- Improve preview image alt text from generic "Preview" to descriptive Indonesian text "Pratinjau gambar daun jagung untuk diagnosis"
- Use auth store setter consistently in dashboard-page logout instead of direct setState call
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
seriouselly