Update css to align text inside button

CLAUDE.md

@@ -33,6 +33,6 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 - `controllers/` - Route handlers
 - `routes/` - Express route definitions
 - `middlewares/` - Custom middleware functions
-- `views/` - EJS templates
+- `views/` - EJS templatesa
 
 When working in this Express.js application, follow the existing patterns in controllers, models, and routes folders. Handle all form validation with express-validator and use the error handling middleware for consistent error responses.

app.js

@@ -20,13 +20,18 @@ const { pool } = require('./config/database');
 const indexRoutes = require('./routes/index');
 const authRoutes = require('./routes/auth');
 const userRoutes = require('./routes/user');
+// New routes
+const budgetRouter = require('./routes/budget');
+const transactionRouter = require('./routes/transaction');
 
 // Import custom middleware
 const { setLocals } = require('./middlewares/locals');
 const { handleErrors } = require('./middlewares/error-handler');
 
 // Initialize Express app
 const app = express();
+// Tell Express it's behind a proxy (Render/Cloudflare), so secure cookies work
+app.set('trust proxy', 1);
 
 // Test database connection on startup
 if (process.env.DATABASE_URL) {
@@ -43,8 +48,11 @@ if (process.env.DATABASE_URL) {
 
 // Configure Express
 app.use(express.json());
-app.use(express.urlencoded({ extended: true }));
+// data parsed as simple key-value pairs
+app.use(express.urlencoded({ extended: false }));
 app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static('public'));
+
 
 // Set up EJS view engine
 app.set('view engine', 'ejs');
@@ -110,6 +118,9 @@ app.use(setLocals);
 app.use('/', indexRoutes);
 app.use('/auth', authRoutes);
 app.use('/user', userRoutes);
+// new routes
+app.use('/', budgetRouter);
+app.use('/', transactionRouter);
 
 // Error handling middleware
 app.use(handleErrors);

models/Category.js

@@ -0,0 +1,51 @@
+const { pool } = require('../config/database');
+
+// Get all categories for a user
+async function getCategoriesForUser(userId) {
+  const result = await pool.query(
+    `
+    SELECT *
+    FROM categories
+    WHERE user_id = $1
+    ORDER BY type, name
+    `,
+    [userId]
+  );
+  return result.rows;
+}
+
+// Create a new category
+async function createCategory(userId, { name, type }) {
+  const result = await pool.query(
+    `
+    INSERT INTO categories (user_id, name, type)
+    VALUES ($1, $2, $3)
+    RETURNING *
+    `,
+    [userId, name, type]
+  );
+  return result.rows[0];
+}
+
+// seeder for first time users
+async function seedDefaultCategoriesForUser(userId) {
+    const defaults = [
+      { name: 'Salary', type: 'income' },
+      { name: 'Freelance', type: 'income' },
+      { name: 'Rent', type: 'expense' },
+      { name: 'Food', type: 'expense' },
+      { name: 'Utilities', type: 'expense' },
+      { name: 'Savings', type: 'expense' },
+      { name: 'Entertainment', type: 'expense' },
+    ];
+
+    for (const c of defaults) {
+      await createCategory(userId, c);
+    }
+  }
+
+module.exports = {
+  getCategoriesForUser,
+  createCategory,
+  seedDefaultCategoriesForUser,
+};

models/Transaction.js

@@ -0,0 +1,98 @@
+const { pool } = require('../config/database');
+
+async function getTransactionsForUser(userId) {
+  // Fetch transactions along with category names
+
+  const result = await pool.query(
+    `
+    SELECT t.*, c.name AS category_name
+    FROM transactions t
+    LEFT JOIN categories c ON t.category_id = c.id
+    WHERE t.user_id = $1
+    ORDER BY t.date DESC, t.created_at DESC
+    `,
+    [userId]
+  );
+  return result.rows;
+}
+// Create a new transaction
+async function createTransaction(userId, { categoryId, type, amount, description, date }) {
+  const result = await pool.query(
+    `
+    INSERT INTO transactions (user_id, category_id, type, amount, description, date)
+    VALUES ($1, $2, $3, $4, $5, $6)
+    RETURNING *
+    `,
+    [userId, categoryId || null, type, amount, description || null, date]
+  );
+  return result.rows[0];
+}
+// Get dashboard summary (total income, total expense, balance)
+async function getDashboardSummary(userId) {
+  const result = await pool.query(
+    `
+    SELECT
+      COALESCE(SUM(CASE WHEN type = 'income' THEN amount END), 0) AS total_income,
+      COALESCE(SUM(CASE WHEN type = 'expense' THEN amount END), 0) AS total_expense
+    FROM transactions
+    WHERE user_id = $1
+    `,
+    [userId]
+  );
+
+  const row = result.rows[0];
+  return {
+    totalIncome: Number(row.total_income),
+    totalExpense: Number(row.total_expense),
+    balance: Number(row.total_income) - Number(row.total_expense)
+  };
+}
+// Get a single transaction by ID
+async function getTransactionById(userId, transactionId) {
+  const result = await pool.query(
+    `
+    SELECT t.*, c.name AS category_name
+    FROM transactions t
+    LEFT JOIN categories c ON t.category_id = c.id
+    WHERE t.user_id = $1 AND t.id = $2
+    `,
+    [userId, transactionId]
+  );
+  return result.rows[0];
+}
+// Update a transaction
+async function updateTransaction(userId, transactionId, { amount, type, categoryId, description, date }) {
+  const result = await pool.query(
+    `
+    UPDATE transactions
+    SET amount = $1,
+        type = $2,
+        category_id = $3,
+        description = $4,
+        date = $5
+    WHERE id = $6 AND user_id = $7
+    RETURNING *
+    `,
+    [amount, type, categoryId, description, date, transactionId, userId]
+  );
+  return result.rows[0];
+}
+// Delete a transaction
+async function deleteTransaction(userId, transactionId) {
+  await pool.query(
+    `
+    DELETE FROM transactions
+    WHERE id = $1 AND user_id = $2
+    `,
+    [transactionId, userId]
+  );
+}
+
+module.exports = {
+  getTransactionsForUser,
+  createTransaction,
+  getDashboardSummary,
+  getTransactionById,
+  updateTransaction,
+  deleteTransaction,
+};

package.json

@@ -20,16 +20,16 @@
   "dependencies": {
     "bcrypt": "^5.1.1",
     "connect-pg-simple": "^10.0.0",
-    "csurf": "^1.11.0",
-    "dotenv": "^16.3.1",
+    "csurf": "^1.2.2",
+    "dotenv": "^16.6.1",
     "ejs": "^3.1.9",
-    "express": "^4.18.2",
+    "express": "^4.22.1",
     "express-session": "^1.18.1",
     "express-validator": "^7.0.1",
     "multer": "^1.4.5-lts.2",
     "pg": "^8.13.1"
   },
   "devDependencies": {
-    "nodemon": "^3.0.2"
+    "nodemon": "^3.1.11"
   }
 }

public/css/budget.css

@@ -0,0 +1,147 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  /* Updated: Soft yellow background */
+  background-color: #FFF5E1; 
+  color: #333;
+}
+
+header {
+  /* Updated: Vibrant orange header background */
+  background-color: #FF9900;
+  color: #FFFFFF;
+  text-align: center;
+  padding: 15px;
+}
+
+.budget-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+section {
+  /* Updated: Lighter section background */
+  background: #FFF5E1;
+  border: 1px solid #FFCC00;
+  padding: 10px;
+  margin: 10px 0;
+  width: 100%;
+  max-width: 800px;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+
+/* Updated: Added text-align center to income-section */
+.income-section {
+  text-align: center;
+  /* Updated: Lighter section background */
+  background: #FFF5E1;
+  border: 1px solid #FFCC00;
+  padding: 10px;
+  margin: 10px 0;
+  width: 100%;
+  max-width: 800px;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+
+button {
+  /* Updated: Orange button background */
+  background-color: #FF9900;
+  color: #FFFFFF;
+  border: none;
+  padding: 8px 15px;
+  cursor: pointer;
+  border-radius: 4px;
+  /* Added margin for spacing around buttons */
+  margin: 5px; 
+}
+
+button:hover {
+  opacity: 0.8;
+}
+
+.navbar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 10px 20px;
+  border-bottom: 2px solid #ddd;
+  /* Updated: Darker orange/brown base */
+  background-color: #A0522D;
+}
+
+.navbar nav {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.nav-home {
+  position: absolute;
+  left: 20px;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 1.1rem;
+  /* Updated: Bright yellow link color */
+   color: #FFCC00;
+}
+
+.nav-home:hover {
+  text-decoration: underline;
+}
+
+.navbar h1 {
+  margin: 0;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+/* Updated: Added text-align center to expense-inputs */
+.expense-inputs {
+    text-align: center; 
+}
+
+/* Added margin to inputs and select for better spacing when centered */
+input, select {
+    margin: 5px;
+}
+
+/* Removes bullet points */
+main ul {
+  list-style-type: none;
+  padding-left: 0; /* Ensures the list items align with other content */
+}
+
+/* make the list items look cleaner */
+main ul li {
+  display: flex;
+  justify-content: space-between; /* Pushes the edit/delete buttons to the right */
+  padding: 8px 0;
+  border-bottom: 1px solid #FFCC00; /* Use your existing border color */
+  align-items: center;
+}
+
+/* Style for the edit/delete*/
+main ul li a {
+  margin-right: 10px;
+  color: #A0522D; /* Use your existing navbar color for links */
+  text-decoration: none;
+  font-size: 0.9em;
+}
+
+main ul li button {
+  /* Inherit your existing button styles*/
+  background-color: #DB4437; /* A distinct red for delete actions */
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+