Merge eb352e933b into ebb7467814

.github/copilot-instructions.md

@@ -0,0 +1,48 @@
+# Project Guidelines
+
+## Overview
+
+React expense tracker starter app (Vite + React 19). Intentionally contains bugs, poor UI, and messy code — designed as a teaching project for incremental refactoring.
+
+## Build and Test
+
+```bash
+npm install           # Install dependencies
+npm run dev           # Dev server → http://localhost:5173
+npm run build         # Production build → dist/
+npm run lint          # ESLint check
+```
+
+> **Windows note:** Use `npm.cmd` instead of `npm` if PowerShell execution policy blocks scripts.
+
+## Architecture
+
+- **Single-file app** — all logic lives in `src/App.jsx` (~180 lines)
+- **No component extraction** — summary cards, form, filters, and transaction table are all inline
+- **State:** multiple `useState` calls (no context, no external state library)
+- **Styling:** plain CSS files (`App.css`, `index.css`), kebab-case class names, no CSS modules
+
+## Known Issues (Intentional)
+
+These are learning targets, not legacy debt:
+
+1. **Amounts stored as strings** — causes string concatenation instead of arithmetic in totals
+2. **Missing table column** — `Type` header exists but no matching `<td>` in rows
+3. **Data error** — "Freelance Work" marked as expense, should be income
+4. **No delete feature** — `.delete-btn` CSS exists but no button in DOM
+5. **Monolithic component** — everything in one file, no extraction
+
+## Conventions
+
+- **Components:** PascalCase filenames, `.jsx` extension
+- **Variables:** camelCase
+- **CSS classes:** kebab-case
+- **Imports:** relative paths, CSS imported at component level
+- **State:** React `useState` hooks (keep consistent with existing pattern unless refactoring)
+
+## Refactoring Targets
+
+When asked to improve the code, consider these extraction candidates:
+- `<TransactionTable>`, `<AddTransactionForm>`, `<SummaryCard>` components
+- `useTransactions` custom hook for transaction logic
+- Constants file for hardcoded categories

src/App.jsx

@@ -3,14 +3,14 @@ import './App.css'
 
 function App() {
   const [transactions, setTransactions] = useState([
-    { id: 1, description: "Salary", amount: "5000", type: "income", category: "salary", date: "2025-01-01" },
+    { id: 1, description: "Salary", amount: 5000, type: "income", category: "salary", date: "2025-01-01" },
-    { id: 2, description: "Rent", amount: "1200", type: "expense", category: "housing", date: "2025-01-02" },
+    { id: 2, description: "Rent", amount: 1200, type: "expense", category: "housing", date: "2025-01-02" },
-    { id: 3, description: "Groceries", amount: "150", type: "expense", category: "food", date: "2025-01-03" },
+    { id: 3, description: "Groceries", amount: 150, type: "expense", category: "food", date: "2025-01-03" },
-    { id: 4, description: "Freelance Work", amount: "800", type: "expense", category: "salary", date: "2025-01-05" },
+    { id: 4, description: "Freelance Work", amount: 800, type: "expense", category: "salary", date: "2025-01-05" },
-    { id: 5, description: "Electric Bill", amount: "95", type: "expense", category: "utilities", date: "2025-01-06" },
+    { id: 5, description: "Electric Bill", amount: 95, type: "expense", category: "utilities", date: "2025-01-06" },
-    { id: 6, description: "Dinner Out", amount: "65", type: "expense", category: "food", date: "2025-01-07" },
+    { id: 6, description: "Dinner Out", amount: 65, type: "expense", category: "food", date: "2025-01-07" },
-    { id: 7, description: "Gas", amount: "45", type: "expense", category: "transport", date: "2025-01-08" },
+    { id: 7, description: "Gas", amount: 45, type: "expense", category: "transport", date: "2025-01-08" },
-    { id: 8, description: "Netflix", amount: "15", type: "expense", category: "entertainment", date: "2025-01-10" },
+    { id: 8, description: "Netflix", amount: 15, type: "expense", category: "entertainment", date: "2025-01-10" },
   ]);
 
   const [description, setDescription] = useState("");
@@ -47,7 +47,7 @@ function App() {
     const newTransaction = {
       id: Date.now(),
       description,
-      amount,
+      amount: parseFloat(amount),
       type,
       category,
       date: new Date().toISOString().split('T')[0],