💡 OopsBudgeter 2.0 – New Database, Better Management!

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "Uncategorized"
+  ]
+}

Dockerfile

@@ -1,15 +1,30 @@
-FROM node:20-alpine
+FROM node:20-slim AS builder
 
 WORKDIR /app
 
-COPY package*.json ./
-
-RUN npm install
+COPY package.json bun.lockb ./
+RUN npm install -g bun && bun install --frozen-lockfile
 
 COPY . .
 
-EXPOSE 3000
+RUN bun run build
+
+FROM node:20-slim AS runner
+
+WORKDIR /app
 
-RUN npm run build
+COPY --from=builder /app/.next .next
+COPY --from=builder /app/public public
+COPY --from=builder /app/package.json .
+COPY --from=builder /app/bun.lockb .
+COPY --from=builder /app/drizzle drizzle
+COPY --from=builder /app/src/schema src/schema
+COPY --from=builder /app/drizzle.config.ts drizzle.config.ts
+
+RUN npm install -g bun && bun install --frozen-lockfile --production
+
+RUN bun add -g drizzle-kit
+
+EXPOSE 3000
 
-CMD ["npm", "start"]
+CMD ["sh", "-c", "bunx drizzle-kit push --config=drizzle.config.ts && bun start"]

README.md

@@ -1,100 +1,92 @@
 # OopsBudgeter
 
-OopsBudgeter is a personal finance management app designed to help users track their income and expenses. Built with **Next.js**, **React**, and **Tailwind CSS**, the app is **PWA** (Progressive Web App)-enabled and can be easily self-hosted with Docker.
+OopsBudgeter is a personal finance management app designed to help users track their income and expenses. Built with **Next.js**, **React**, and **Tailwind CSS**, the app is **PWA** (Progressive Web App)-enabled and can be easily self-hosted with Docker. 
+
+*(**Why made it?** Because who doesn't want a budget app that makes them realize how broke they are? 💸😂)*
 
 ## Features
 
-- **Track income and expenses**: Easily manage your transactions with details like amount, description, and date.
-- **PWA Support**: Works offline, and you can install it as a native app.
-- **JWT-based authentication**: Secure your app with token-based authentication.
-- **Customizable Currency**: Supports over 20 currencies.
-- **Passcode Protection**: Add a passcode to protect access to the app and api.
-- **Responsive**: Built using Tailwind CSS for a clean and modern design.
+- **Track income and expenses**: Easily manage transactions with details like amount, description, category, and date.
+- **Advanced Analytics Dashboard**: Gain insights into your financial trends with detailed graphs and FakeAI-powered insights. *Yes, we graphically display your bad decisions!*
+- **FakeAI-Powered Insights 🤖📊**: Automated spending analysis and financial recommendations (like, "Stop buying useless stuff!").
+- **No-Spend Streaks**: Tracks how many consecutive days you've avoided spending. *Good luck breaking your record past a week!* 😂
+- **PWA Support**: Works offline, and you can install it as a native app. *Now you can check your tragic finances even without internet!*
+- **JWT-based authentication**: Secure your app with token-based authentication. *Hackers want your money? Joke’s on them, you don’t have any!*
+- **Customizable Currency**: Supports all ISO 4217 currencies. *Yes, even Monopoly money... but don’t ask why.*
+- **Passcode Protection**: Add a passcode to protect access to the app and API. *As if your bank account isn’t already protecting itself.*
+- **Responsive UI**: Built using Tailwind CSS for a clean and modern design.
 - **Docker support**: Easily deploy with Docker.
+- **Data Export**: Download transactions in **CSV** or **JSON** format or print them to a **PDF** format. *Because your financial misery should be well-documented!*
 
 ## Methods and Technologies Used
 
-- **Frontend**: 
-  - **Next.js** 15, **React** 19
-  - **Tailwind CSS** for styling
-  - **React Hook Form** for form handling
-  - **Zod** for form validation
-  - **JWT** for user authentication and security
-  - **Next-PWA** for Progressive Web App features
+### **Frontend:** 
+- **Next.js 15**, **React 19**
+- **Tailwind CSS** for styling
+- **React Hook Form** for form handling
+- **Zod** for form validation
+- **Recharts** for dynamic financial visualizations
+- **Next-PWA** for Progressive Web App features
 
-- **Backend**:
-  - **Quick.db** for local data storage
-  - **JWT-based authentication** for securing the application
+### **Backend:**
+- **PostgreSQL** for database storage
+- **JWT-based authentication** for securing the application
+- **Drizzle ORM** for database management
 
-- **Deployment**:
-  - **Docker** for containerization and easy deployment
-  - **GitHub Container Registry (GHCR)** for hosting Docker images
+### **Deployment:**
+- **Docker** for containerization and easy deployment
 
 ## Installation
 
-### Install and Run via Docker
+### **Install and Run via Docker**
 
 1. **Clone the repository**:
-
     ```bash
     git clone https://github.com/OopsApps/OopsBudgeter.git
-    cd budgeter
+    cd OopsBudgeter
     ```
-
 2. **Build the Docker image**:
-
     ```bash
-    docker build -t budgeter .
+    docker build -t OopsBudgeter .
     ```
-
 3. **Run the Docker container**:
-
     ```bash
-    docker run -p 3000:3000 budgeter
+    docker run -p 3000:3000 OopsBudgeter
     ```
-
     The app should now be accessible at `http://localhost:3000`.
 
-### Build from Source
+### **Build from Source**
 
 1. **Clone the repository**:
-
     ```bash
     git clone https://github.com/OopsApps/OopsBudgeter.git
-    cd budgeter
+    cd OopsBudgeter
     ```
-
 2. **Install dependencies**:
-
     ```bash
     bun install
     ```
-
-3. **Set environment variables** (details below) in a `.env.local` file.
-
+3. **Set environment variables** in a `.env.local` file (see below).
 4. **Build the app**:
-
     ```bash
     bun run build
     ```
-
 5. **Start the app**:
-
     ```bash
     bun start
     ```
-
     The app should now be accessible at `http://localhost:3000`.
 
 ## Environment Variables
 
-Make sure to create a `.env.local` file in the root directory and add the following environment variables:
-
-- **NEXT_PUBLIC_CURRENCY**: Set the default currency for the app (e.g., `USD`, `EUR`, `INR`, etc.)
-- **PASSCODE**: Set a custom passcode to protect access to the app, 6 digits.
-- **JWT_SECRET**: 32-token secret key used for signing JWT tokens.
+Create a `.env.local` file in the root directory and add the following:
 
-Example `.env.local` file:
+```ini
+NEXT_PUBLIC_CURRENCY=USD # Set your preferred currency
+PASSCODE=123456 # 6-digit passcode for app security
+JWT_SECRET=your-secure-jwt-secret # Secret key for JWT authentication
+DATABASE_URL=your-postgresql-url # PostgreSQL database connection URL
+```
 
 ## Contributing
 
@@ -121,9 +113,21 @@ This project is licensed under the **Apache License 2.0**. See the [LICENSE](LIC
 
 ---
 
-### A simple workflow of the WApp:
+## **How OopsBudgeter Works**
+
+1. **Track Income or Expenses**: Add transactions by selecting type, amount, description, category, and date.
+2. **View Financial Analytics**: Get a breakdown of spending habits, trends, and AI-powered insights. *Aka: How much money you’ve wasted.*
+3. **Monitor Your No-Spend Streak**: See how long you've gone without unnecessary expenses. *Spoiler alert: It won’t be long.*
+4. **Print or Download Transactions**: Export transactions in **CSV** or **JSON** format. *So you can cry over them later.*
+5. **Plan Ahead with Predictions**: View projected spending based on trends. *Basically, a sneak peek into your future regrets.*
+
+OopsBudgeter is your all-in-one finance tracker, **making sure you face your financial mistakes head-on! 🚀😂**
+
+---
+### Disclaimer: About FakeAI Insights
+
+FakeAI is not a real artificial intelligence but rather a collection of predictive algorithms and calculations based on past data. It won’t pass the Turing test, but it will still judge your spending habits mercilessly 😉
+
+---
 
-1. **Track Income or Expenses**: You can add a transaction by choosing whether it's an income or an expense, entering the amount, description, and date.
-2. **View Balance**: The app will keep track of your balance, and you can see your current balance in the dashboard.
-3. **Sort Transactions**: Transactions can be sorted by **amount** or **date** (ascending or descending).
-4. **Print or Download Transactions**: You can print your transactions list for offline use with a nice and modern look.
+Thanks for checking out OopsBudgeter! We appreciate your time and hope this app helps you (or at least makes you laugh while realizing where all your money went). – The OopsApps Team 💀

changelog.md

@@ -0,0 +1,57 @@
+# OopsBudgeter Changelog
+
+## v2.0.0 - The Ultimate Overhaul 🚀🔥
+**Released: March 15, 2025**
+
+**Major Upgrade from v1.0.0: A Complete Revamp!**
+We threw out the old, brought in the new, and gave OopsBudgeter a complete makeover! Say goodbye to QuickDB and hello to PostgreSQL, charts, advanced analytics, and a sleek UI 😏
+
+### ✨ **New Features**
+- **🚀 Migrated from QuickDB to PostgreSQL** for a scalable and robust database solution.
+- **📊 Brand New Analytics Page!**
+  - **Expense Heatmap 🔥** - Track your spending habits visually.
+  - **FakeAI Insights 🤖** - Smart(ish) spending analysis & predictions.
+  - **Net Worth Over Time 📈** - See your financial trajectory.
+  - **Category Trends 🌊** - Track expenses per category monthly.
+  - **Top Transactions 💸** - Your biggest income/expenses at a glance.
+- **🔍 Advanced Filtering & Sorting**
+  - Filter transactions by **date range, category, type, and amount**.
+  - Sort by **newest, oldest, highest, lowest** with a click.
+- **🆕 Enhanced Transaction Handling**
+  - Add/edit transactions with a **datetime picker** (ensures correct timestamps!).
+  - **New Categories** for better tracking of income & expenses.
+  - **Passcode Protection 🔒** - Secure your financial data.
+  - **Instant Toaster Notifications** for transaction actions.
+- **📂 Data Export:** Download transactions in **CSV or JSON** for backups.
+
+### 🔄 **Improvements & Refactors**
+- **🎨 Revamped UI & UX**
+  - New modern **dark-themed UI**.
+  - Improved responsiveness for **desktop & mobile**.
+- **♻️ Moved Balance Logic to Context API** for cleaner state management.
+- **🚀 Optimized Docker Image**
+  - Switched to **multi-stage build** for a smaller and more efficient container.
+  - Added automatic **PostgreSQL migrations** on startup.
+- **🔧 Fixed Various Bugs**
+  - Password prompt **no longer flickers**.
+  - Fixed **date picker not updating correctly**.
+  - Fixed **sorting and filtering edge cases**.
+
+### 💥 **Breaking Changes**
+- **Old QuickDB-based data is not compatible.** Migration to PostgreSQL is required.
+- **New environment variables are needed:**
+  ```ini
+  DATABASE_URL=your-postgres-db-url
+  NEXT_PUBLIC_CURRENCY=USD
+  PASSCODE=123456
+  JWT_SECRET=your-secure-jwt-secret
+  ```
+
+### 📢 **Next Steps**
+- **Real AI-powered insights** (instead of FakeAI predictions 😉)
+- **Recurring Transactions & Budget Goals!**
+- **Improved mobile experience.**
+
+---
+**Thanks for using OopsBudgeter – The OopsApps Team 💜**
+

docker-compose.yml

@@ -1,17 +1,18 @@
-version: "3"
 services:
-  oopsbudgeter:
-    image: ghcr.io/oopsapps/oopsbudgeter:latest
+  oops-budgeter:
+    image: iconical/oopsbudgeter:latest
     ports:
       - "3333:3000"
     environment:
       - NODE_ENV=production
-      - NEXT_PUBLIC_CURRENCY=USD
-      - PASSCODE=123123
-      - JWT_SECRET=Ithinkyouforgottouseyourown32tokencode
+      - NEXT_PUBLIC_CURRENCY=USD # Set your preferred currency
+      - PASSCODE=123456 # 6-digit passcode for app security
+      - JWT_SECRET=your-secure-jwt-secret # Secret key for JWT authentication
+      - DATABASE_URL=your-postgresql-url # PostgreSQL database connection URL
+
     networks:
-      - oopsbudgeter-network
+      - oops-budgeter-network
 
 networks:
-  oopsbudgeter-network:
+  oops-budgeter-network:
     driver: bridge

drizzle.config.ts

@@ -0,0 +1,27 @@
+/*
+ *   Copyright (c) 2025 Laith Alkhaddam aka Iconical or Sleepyico.
+ *   All rights reserved.
+
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+
+ *   http://www.apache.org/licenses/LICENSE-2.0
+
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+import "dotenv/config";
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  out: "./drizzle",
+  schema: "./src/schema/dbSchema.ts",
+  dialect: "postgresql",
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+});

drizzle/0000_melodic_purifiers.sql

@@ -0,0 +1,12 @@
+CREATE TABLE "balance" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"amount" real DEFAULT 0 NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "transactions" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"type" text NOT NULL,
+	"amount" real NOT NULL,
+	"description" text,
+	"date" timestamp DEFAULT now()
+);

drizzle/0001_yellow_thena.sql

@@ -0,0 +1,5 @@
+CREATE TYPE "public"."TransactionType" AS ENUM('income', 'expense');--> statement-breakpoint
+ALTER TABLE "transactions" ALTER COLUMN "type" SET DATA TYPE TransactionType;--> statement-breakpoint
+ALTER TABLE "transactions" ALTER COLUMN "type" DROP NOT NULL;--> statement-breakpoint
+ALTER TABLE "transactions" ALTER COLUMN "date" DROP DEFAULT;--> statement-breakpoint
+ALTER TABLE "transactions" ALTER COLUMN "date" SET NOT NULL;

drizzle/0002_icy_phil_sheldon.sql

@@ -0,0 +1 @@
+ALTER TABLE "balance" RENAME TO "currentBalance";

drizzle/0003_lonely_bill_hollister.sql

@@ -0,0 +1,4 @@
+CREATE TYPE "public"."ExpenseCategories" AS ENUM('Food', 'Rent', 'Utilities', 'Transport', 'Entertainment', 'Shopping', 'Other');--> statement-breakpoint
+CREATE TYPE "public"."IncomeCategories" AS ENUM('Salary', 'Freelance', 'Investment', 'Bonus', 'Other');--> statement-breakpoint
+DROP TABLE "currentBalance" CASCADE;--> statement-breakpoint
+ALTER TABLE "transactions" ADD COLUMN "category" text;