Commit Graph
65 Commits
Author SHA1 Message Date
seriouselly 3b8cb49f2a fix(sidebar): toggle sidebar state when clicking navigation links
- 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.
2026-06-12 12:35:46 +07:00
seriouselly a77a6c84ff fix(sidebar): persist sidebar state across page navigation
- 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.
2026-06-12 12:26:11 +07:00
seriouselly 8ede458a71 refactor(sidebar): set initial state to collapsed by default
- 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.
2026-06-12 11:27:23 +07:00
seriouselly cb90d23293 feat(footer): automate copyright year
- Import `Date` object to dynamically fetch the current year for the copyright notice.
- Ensure the footer always displays the correct year without manual updates.
2026-06-08 21:38:50 +07:00
seriouselly d7a145f18f refactor(layout): unify mobile and desktop navigation and fix layout spacing
- 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.
2026-06-08 21:32:52 +07:00
seriouselly 4a44d21e66 feat(auth): add password visibility toggle in auth form
- 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`.
2026-06-08 21:19:57 +07:00
seriouselly 70c216ac54 Merge branch 'main' of https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu into selly/frontend 2026-06-08 21:06:11 +07:00
seriouselly af69dc4df7 refactor(layout): implement responsive sidebar and synchronize mobile menu
- 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.
2026-06-08 21:00:55 +07:00
seriouselly 22ddd2d24e Merge branch 'main' of https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu into selly/frontend 2026-06-08 17:21:27 +07:00
MythEclipse 09602b3fe0 refactor(web): add value formatter to ChartCard component
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.
2026-06-08 02:03:23 +07:00
MythEclipse 64dcfa70d8 feat(web): add client-side telemetry for API calls, errors, and scan operations 2026-06-08 01:23:51 +07:00
MythEclipse 89dcbe8fa2 feat(ml-service): add detailed ML observability metrics for inference, predictions, and errors 2026-06-08 01:21:47 +07:00
MythEclipse c45f771f24 feat(telemetry): add comprehensive Prometheus metrics and expand dashboard with system, API, ML, and Node.js runtime sections 2026-06-08 01:20:42 +07:00
MythEclipse b7a3c530a7 refactor(web): replace custom telemetry API with direct Prometheus queries
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
2026-06-08 01:07:13 +07:00
MythEclipse 26f99fa4d4 feat(web): compute memory usage client-side and add app-specific metrics to telemetry dashboard 2026-06-08 00:54:59 +07:00
MythEclipse f5ac0a8795 feat(web): implement telemetry dashboard with data visualization
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
2026-06-08 00:31:30 +07:00
seriouselly 56139388d3 feat(auth): implement full logout system and protect application routes
- 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
2026-06-08 00:20:00 +07:00
MythEclipse 65d0040c0d fix(web): escape quotes in sub_filter for fetch calls
Update the sub_filter pattern for fetch requests to include escaped
double quotes. This ensures that path rewriting correctly handles
JavaScript fetch calls that use double-quoted strings, preventing
broken resource paths in the telemetry dashboard.
2026-06-08 00:11:02 +07:00
MythEclipse 4589766f27 build(web): switch to alpine-based nginx runner for sub_filter support
Migrate the web runner stage from the official nginx alpine image to a
standard alpine image with the nginx package installed. This ensures
the presence of the `http_sub_module` required for path rewriting in
the telemetry proxy configuration.

- Replace `nginx:1.27-alpine` with `alpine:3.20` and `apk add nginx`
- Update Nginx configuration file path to `/etc/nginx/http.d/default.conf`
- Update web asset root directory to `/var/lib/nginx/html`
- Add `X-Forwarded-For` and `X-Forwarded-Proto` headers to proxy locations
2026-06-08 00:00:33 +07:00
MythEclipse 4dde9d8408 refactor(web): implement nginx reverse proxy for telemetry dashboard
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
2026-06-07 23:44:57 +07:00
MythEclipse 9602a64e18 feat(web): externalize telemetry URL via environment variables
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
2026-06-07 23:31:15 +07:00
MythEclipse cd93d1a06d feat(web): add telemetry dashboard page with nginx proxy and nav integration 2026-06-07 23:21:40 +07:00
Asep Haryana SaputraandGitHub 1106cbf62f Merge branch 'ATLAS-PJK-GM007:main' into main 2026-06-07 21:43:28 +07:00
MythEclipse 2c41b80f97 feat: expose /metrics endpoint and add telemetry ClickHouse credentials 2026-06-07 20:57:45 +07:00
seriouselly 9a05c380cc feat(ui): add review menu to mobile nav and update card styling
- 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.
2026-06-07 18:22:14 +07:00
MythEclipse 5a47b0c658 feat(web): add client-side telemetry with Web Vitals and dev metrics endpoint 2026-06-07 18:13:11 +07:00
seriouselly 68258074a6 fix(build): resolve missing module error for App component
- Update import path and filename for the App component to fix case sensitivity build issues on Linux environments.
2026-06-06 03:10:37 +07:00
seriouselly 450b2f9d97 refactor(ui): fix layout issues and temporarily disable auth features
- 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.
2026-06-06 03:01:07 +07:00
seriouselly 9f9098b91b feat(mobile-nav): enhance responsive sidebar with user info and auth actions
- 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
2026-06-06 02:15:43 +07:00
seriouselly 5129bbe958 feat: harmonize page headers to match Scan Tanaman title style 2026-06-06 01:37:38 +07:00
seriouselly 1b31ea31a2 refactor(navbar): standardize scan navigation and cleanup logout
- Rename Scan to Scan Tanaman for Indonesian consistency
- Remove logout button from navbar (can be accessed elsewhere)
- Streamline navigation UI
2026-06-06 00:11:55 +07:00
seriouselly 80fa75130a feat(scan-page): unauthenticated upload with scanner area detection
- Implement responsive drag-and-drop upload interface
- Add dynamic scanner frame overlay with image dimensions
- Enable unauthenticated uploads via anonymous user system
- Show real-time scan area guidance with corner markers
- Maintain clean separation: select → preview → analyze
2026-06-06 00:06:36 +07:00
seriouselly 065b802344 fix(scan-page): implement upload button workflow
- 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.
2026-06-05 19:01:48 +07:00
seriouselly aa033c86a9 Merge branch 'main' of https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu into selly/frontend 2026-06-04 19:58:40 +07:00
seriouselly 94d341705a refactor: improve Scan page layout and error messaging
- Reorganize sidebar: stack "Persyaratan Berkas" below "Panduan Pengambilan Foto"
- Add responsive grid layout for mobile devices
- Display service-specific error messages (uploader vs model service)
- Reduce padding and optimize spacing throughout
- Enhance error handling with source field detection
2026-06-04 19:33:42 +07:00
Asep Haryana Saputra b713b72d2d fix: RiskBadge overflow on long disease names in catalog cards
- 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
2026-06-02 09:39:01 +00:00
Asep Haryana SaputraandClaude Opus 4.7 81d083a2b8 fix(frontend): wrap catalog, disease detail, and expert reviews with MainLayout
- 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>
2026-06-02 07:47:59 +00:00
Asep Haryana SaputraandClaude Opus 4.7 4d6ca4912c fix(frontend): align catalog with dashboard, make disease cards clickable, fix stat cards
- 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>
2026-06-02 07:22:28 +00:00
Asep Haryana SaputraandClaude Opus 4.7 ba24cf1a05 fix(frontend): align pages with DB schema, fix auth, and improve UX
- 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>
2026-06-02 07:12:49 +00:00
seriouselly 891a59d9da fix: improve link formatting for better consistency in DashboardPage 2026-06-02 09:53:28 +07:00
seriouselly 2547c954a4 fix: adjust link text size and styling in DashboardPage for better readability 2026-06-02 09:52:41 +07:00
seriouselly 383cd8ee25 feat: add Diagnoses page and update routing; enhance Scan page with recent diagnoses list 2026-06-02 03:24:40 +07:00
seriouselly 0745dd903d feat: update landing page and add new library and scan pages
- 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.
2026-06-02 02:42:07 +07:00
Asep Haryana Saputra 4453758180 fix: update API proxy configuration to use internal service endpoint 2026-05-22 22:06:21 +00:00
Asep Haryana Saputra 1d421ee948 feat: update deployment configuration and enhance VITE_API_BASE_URL handling 2026-05-22 21:53:01 +00:00
Asep Haryana SaputraandClaude Opus 4.7 1978597bcf feat: add Docker deployment workflow
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-22 21:20:56 +00:00
Asep Haryana Saputra 1f4e0fbef3 fix: update environment variable usage in scripts and enhance CSS theming 2026-05-22 18:50:07 +00:00
Asep Haryana Saputra 553e8f49aa fix: remove deprecated baseUrl option from tsconfig files 2026-05-22 18:36:45 +00:00
Asep Haryana Saputra ab81168be7 chore: update dependencies and build scripts
- 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.
2026-05-22 18:30:40 +00:00
Asep Haryana SaputraandClaude Opus 4.7 be569ff675 fix: improve expert review form accessibility
- 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>
2026-05-22 17:17:24 +00:00