Harsh changes#20
Conversation
…tering, pagination, and summary metrics
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR updates the frontend to target a localhost backend by default and expands several UI screens (Transactions, Filing results, AI Assistant) with richer client-side behavior and API-driven responses.
Changes:
- Switches multiple API base URLs from the hosted endpoint to
http://localhost:8000(including.envandsrc/utils/api.jsfallback). - Replaces the Transactions page sample data with live API fetching plus filtering, summary metrics, and pagination.
- Enhances Filing results display to show additional “process” response data, and adds a simple markdown renderer for formatted AI responses in the AI Assistant.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| Frontend/src/utils/api.js | Changes default API base URL fallback to localhost. |
| Frontend/.env | Updates VITE_API_URL to localhost. |
| Frontend/src/pages/Upload.jsx | Switches hardcoded backend URL to localhost. |
| Frontend/src/pages/Dashboard.jsx | Switches hardcoded backend URL to localhost. |
| Frontend/src/pages/Transactions.jsx | Implements API-backed transactions list with filters, summary cards, delete, and pagination. |
| Frontend/src/pages/Filing.jsx | Adds processResponse plumbing and renders computation/process data in ResultsDisplay. |
| Frontend/src/pages/AIAssistant.jsx | Adds markdown-like rendering for formatted responses; calls API for financial advisor; adds (but does not fully wire) a transactions tab section. |
Comments suppressed due to low confidence (1)
Frontend/src/pages/AIAssistant.jsx:186
- A
transactionstab is rendered later (activeTab === 'transactions'), but it’s not included in thetabsarray, so it’s unreachable via the UI. Either add the missing tab entry or remove the dead tab section to avoid confusing/unused code paths.
const tabs = [
{ id: 'tax', label: 'Tax Assistant' },
{ id: 'financial', label: 'Financial Advisor' },
{ id: 'personal', label: 'Personal Q&A' },
];
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Defaulting API base URL to http://localhost:8000 will break any environment where VITE_API_URL isn’t set (e.g., deployed builds or preview environments) by silently pointing the frontend at the user’s own machine. Prefer leaving the fallback as the production/staging API URL, or remove the fallback and fail fast if VITE_API_URL is missing (with a clear error).
| const rawBaseUrl = | |
| typeof import.meta.env.VITE_API_URL === 'string' | |
| ? import.meta.env.VITE_API_URL.trim() | |
| : ''; | |
| if (!rawBaseUrl) { | |
| throw new Error('Missing required VITE_API_URL environment variable'); | |
| } |
| @@ -1,2 +1,2 @@ | |||
| # Backend API URL | |||
| VITE_API_URL=https://taxai-77xc.onrender.com | |||
| VITE_API_URL=http://localhost:8000 | |||
There was a problem hiding this comment.
Committing .env with VITE_API_URL=http://localhost:8000 makes the repo default to a developer-local backend and can break other developers’ setups and any build that consumes repo env files. This value is usually kept in an untracked .env.local (or only in .env.example) while .env remains production-safe or absent.
| VITE_API_URL=http://localhost:8000 |
There was a problem hiding this comment.
Hardcoding API_URL to http://localhost:8000 will break non-local environments. Use import.meta.env.VITE_API_URL (or the shared API_BASE_URL from src/utils/api.js) so the backend URL is configured per environment.
| const API_URL = import.meta.env.VITE_API_URL; |
| import AppLayout from '../components/AppLayout'; | ||
|
|
||
| const API_URL = 'https://taxai-77xc.onrender.com'; | ||
| const API_URL = 'http://localhost:8000'; |
There was a problem hiding this comment.
Hardcoding API_URL to http://localhost:8000 will break non-local environments. Use import.meta.env.VITE_API_URL (or the shared API_BASE_URL from src/utils/api.js) so the backend URL is configured per environment.
| const API_URL = 'http://localhost:8000'; | |
| const API_URL = import.meta.env.VITE_API_URL; |
| import { useAuth } from '../context/AuthContext'; | ||
| import AppLayout from '../components/AppLayout'; | ||
|
|
||
| const API_URL = 'https://taxai-77xc.onrender.com'; |
There was a problem hiding this comment.
Hardcoding API_URL to http://localhost:8000 will break non-local environments. Use import.meta.env.VITE_API_URL (or the shared API_BASE_URL from src/utils/api.js) so the backend URL is configured per environment.
| const API_URL = import.meta.env.VITE_API_URL; |
|
|
||
| if (!response.ok) throw new Error('Failed to delete transaction'); | ||
|
|
||
| setTransactions(transactions.filter((txn) => txn.id !== txnId)); |
There was a problem hiding this comment.
setTransactions(transactions.filter(...)) uses the transactions value from the render closure, which can be stale if multiple deletes/updates happen quickly. Use a functional state update (setTransactions(prev => prev.filter(...))) to ensure the latest state is used.
| setTransactions(transactions.filter((txn) => txn.id !== txnId)); | |
| setTransactions((prevTransactions) => | |
| prevTransactions.filter((txn) => txn.id !== txnId) | |
| ); |
| if (!value) return '₹0'; | ||
| return '₹' + value.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); |
There was a problem hiding this comment.
formatCurrency treats 0 as falsy and returns ₹0 (without decimals), while other amounts include 2 decimals. If a transaction/summary value is legitimately 0, this will render inconsistently. Consider checking value == null instead of !value and always formatting with the same options.
| if (!value) return '₹0'; | |
| return '₹' + value.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); | |
| const amount = value == null ? 0 : value; | |
| return '₹' + amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); |
| @@ -3,6 +3,152 @@ import AppLayout from '../components/AppLayout'; | |||
|
|
|||
| const API_URL = 'https://taxai-77xc.onrender.com'; | |||
There was a problem hiding this comment.
Hardcoding API_URL to http://localhost:8000 will break non-local environments. Use import.meta.env.VITE_API_URL (or the shared API_BASE_URL from src/utils/api.js) so the backend URL is configured per environment.
| const API_URL = 'https://taxai-77xc.onrender.com'; | |
| const API_URL = import.meta.env.VITE_API_URL; |
|
|
||
| i++; | ||
| } | ||
|
|
There was a problem hiding this comment.
renderMarkdown only flushes tableRows when a non-table line is encountered. If the content ends while inTable is true (markdown ends with a table), the table rows are never rendered. Add an after-loop flush when inTable && tableRows.length to render trailing tables.
| if (inTable && tableRows.length) { | |
| const headers = tableRows[0]; | |
| const dataRows = tableRows.slice(1); | |
| elements.push( | |
| <div key={`table-${elements.length}`} style={{ marginBottom: '1rem', overflowX: 'auto' }}> | |
| <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: "'DM Sans', sans-serif" }}> | |
| <thead> | |
| <tr> | |
| {headers.map((header, idx) => ( | |
| <th | |
| key={idx} | |
| style={{ | |
| border: '1px solid rgba(255, 255, 255, 0.2)', | |
| padding: '0.75rem', | |
| backgroundColor: 'rgba(255, 255, 255, 0.08)', | |
| color: '#FAFAF7', | |
| textAlign: 'left', | |
| fontWeight: '600', | |
| }} | |
| > | |
| {header} | |
| </th> | |
| ))} | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {dataRows.map((row, rowIdx) => ( | |
| <tr key={rowIdx}> | |
| {row.map((cell, cellIdx) => ( | |
| <td | |
| key={cellIdx} | |
| style={{ | |
| border: '1px solid rgba(255, 255, 255, 0.2)', | |
| padding: '0.75rem', | |
| color: '#FAFAF7', | |
| }} | |
| > | |
| {cell} | |
| </td> | |
| ))} | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| </div> | |
| ); | |
| } |
| {/* TRANSACTIONS TAB */} | ||
| {activeTab === 'transactions' && ( | ||
| <> | ||
| <div className="mb-6 space-y-4"> | ||
| <div | ||
| className="bg-[#f5f3ed] border-l-4 border-[#c9a961] p-4" | ||
| style={{ | ||
| fontFamily: "'DM Sans', sans-serif", | ||
| fontSize: "0.875rem", | ||
| color: "#5a5550", | ||
| }} | ||
| > | ||
| All transactions extracted from your uploaded documents ({transactionCount} total) | ||
| </div> | ||
| </div> | ||
|
|
||
| {transactionsLoading ? ( | ||
| <div |
There was a problem hiding this comment.
The transactions tab UI references identifiers like transactionsLoading, transactionsError, transactions, transactionCount, handleEditTransaction, and handleDeleteTransaction, but they are not defined in this component. If activeTab is ever set to transactions, this will crash at runtime; define the missing state/handlers (and data fetching) or remove this section until it’s wired up.
Summary
Scope
Changes Made
Related Issue
Closes #
Testing
Test Details
Screenshots / API Examples
N/A
Checklist
Notes For Reviewers