Skip to content
This repository was archived by the owner on Nov 22, 2025. It is now read-only.

Comments

feat: simple frontend#4

Merged
Pertempto merged 7 commits intomainfrom
0-simple-frontend
Nov 21, 2025
Merged

feat: simple frontend#4
Pertempto merged 7 commits intomainfrom
0-simple-frontend

Conversation

@Pertempto
Copy link
Contributor

No description provided.

@github-actions
Copy link

In frontend/src/components/InvoicesPage.tsx — employees fetch currently does fetch('/api/employees').then(res => res.json()) without checking res.ok. If the API returns a non-2xx response you'll still attempt to setEmployees(data.employees) and might crash or silently show an empty list. Please check the response status and handle error payloads (and network errors). Also consider using an AbortController to cancel the request on unmount to avoid setting state on an unmounted component.

@github-actions
Copy link

github-actions bot commented Nov 21, 2025

Changes Requested

Please address the following before merging:

  • Fix Tailwind/PostCSS setup in the frontend:
    • Replace frontend/src/index.css content with Tailwind directives (@tailwind base; @tailwind components; @tailwind utilities;).
    • Add a CommonJS PostCSS config file (frontend/postcss.config.cjs or a CommonJS postcss.config.js) that exports tailwindcss and autoprefixer plugins. Vite/PostCSS expect CommonJS by default.
  • Harden network handling in frontend/src/components/InvoicesPage.tsx:
    • Use an AbortController for the invoices fetch and abort on cleanup to avoid setting state after unmount.
    • Check res.ok and surface API error payloads (use data.error when available).
    • Validate response shapes (ensure data.invoices and data.employees are arrays) before calling setInvoices/setEmployees.
    • Guard total rendering (e.g., ensure typeof total === 'number' before calling toFixed) so malformed data does not throw.
  • Review frontend/package-lock.json changes — regenerate from a clean install if only Tailwind + TanStack were intended to avoid massive transitive changes.

Summary of Changes

  • backend:

    • backend/internal/server/server.go: Added default ordering ORDER BY i.Date ASC, i.id ASC to invoices query.
  • frontend:

    • Added Tailwind/TanStack dependencies in frontend/package.json / frontend/package-lock.json.
    • Replaced app CSS with Tailwind-based frontend/src/index.css (currently an @import that must be replaced with Tailwind directives).
    • frontend/vite.config.ts: Added @tailwindcss/vite plugin.
    • frontend/src/App.tsx: Routes now point to the new InvoicesPage.
    • frontend/src/components/InvoicesPage.tsx: New invoices page with date filters, employee selector, debounced fetch, and TanStack table (needs network and shape hardening).
    • Removed legacy assets and styles (frontend/src/App.css, some svg assets).
    • specs/000-proof-of-concept.md updated with frontend progress.

Overall Feedback

  • Negative: There are a few blocking issues that will likely break builds or produce runtime errors for users:

    • PostCSS/Tailwind is not configured as CommonJS; with the current @import "tailwindcss" and no CommonJS postcss.config, Vite/PostCSS may not process Tailwind and the app will look unstyled or fail to build.
    • Frontend fetch flows assume perfect API responses and don't cancel inflight invoice requests. This can cause race conditions, set state on unmounted components, and crash on malformed data (e.g., calling toFixed on undefined). These must be guarded.
  • Positive: The new frontend is well structured and shows strong UX thinking — good default previous-month date logic, debounced fetching to reduce load, clear form layout, and pragmatic use of TanStack Table for sorting/display. Backend change to add deterministic ordering on invoices is a sensible safety improvement. Nice work! 🎉

@Pertempto — ping me after you push the PostCSS config and the fetch hardening and I’ll re-review the PR quickly and help with any follow-ups.

- Add sticky table headers with shadow for better scrolling
- Reduce mobile padding and spacing for better mobile UX
- Make filters collapsible on mobile devices
- Add invoice count display above table
- Sort employees alphabetically in dropdown
- Add URL query params for shareable filtered links
- Improve employee fetch error handling with AbortController
- Remove unused files (App.css, react.svg, vite.svg)
- Upgrade to Tailwind CSS v4 with Vite plugin
- Remove employee ID column from table display
- Default sort to date ascending (backend + frontend)
- Use professional Unicode arrows for sort indicators
@github-actions
Copy link

frontend/src/index.css — please replace the single @import "tailwindcss"; with the three Tailwind directives and ensure PostCSS is configured. Minimal changes I expect:

  • Replace file contents with:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
  • Add a PostCSS config using CommonJS (name it postcss.config.cjs or postcss.config.js but export with CommonJS). Example minimal file (postcss.config.cjs):

    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    };

Reason: Vite/PostCSS expect CommonJS for postcss.config.js unless the package.json has type: "module". Right now I can't find a PostCSS config in the change — builds will break or Tailwind won't be applied. Please add the config (or rename to .cjs) and update index.css as above.

@Pertempto Pertempto merged commit 5d63420 into main Nov 21, 2025
3 checks passed
@Pertempto Pertempto deleted the 0-simple-frontend branch November 21, 2025 17:50
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant