🌟feat: Added currency settings, live conversion & app customization (#v2.2.0)

- Introduced currency selection in settings with persistent storage
- Added live currency conversion for accurate financial tracking
- Implemented ENV-based default currency for flexibility
- Enabled custom app width selection (Compact / Normal mode)
- Assigned predefined colors to categories for better transaction visuals
- Styled transactions with colored backgrounds for improved readability
- Fixed date picker crash when clearing the date (resets to first of the month)
- Optimized color assignment and transaction rendering performance

Author: imthatdev

README.md

@@ -8,7 +8,7 @@ OopsBudgeter is a personal finance management app designed to help users track t
 ###### Please use it for test purposes **only**, check the UI, features and abilities given to the web app or pwa. The PIN code is 696969
 [budget.oopsapps.tech](https://budget.oopsapps.tech/)
 
-##### A Simple Roadmap for this Project: https://trello.com/b/rprhjhY9
+##### A Simple Roadmap for this Project: [Roadmap via Github](https://github.com/orgs/OopsApps/projects/3)
 
 ## Features
 
@@ -45,8 +45,6 @@ OopsBudgeter is a personal finance management app designed to help users track t
 ## Installation
 
 ### Deploy via Vercel (easiest)
-1. Afer deploying with the button, change the build command to `npx drizzle-kit push && next build`
-2. There, it will update the database with the correct schema.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FOopsApps%2FOopsBudgeter%2F&env=NEXT_PUBLIC_CURRENCY,PASSCODE,JWT_SECRET,DATABASE_URL&project-name=oopsbudgeter&repository-name=oopsbudgeter&redirect-url=https%3A%2F%2Fgithub.com%2FOopsApps%2FOopsBudgeter&production-deploy-hook=Github)
 

bun.lockb

@@ -1,5 +1,33 @@
 # OopsBudgeter Changelog
 
+## v2.2.0 - Smart Settings & Dynamic Currency 💰🌍
+**Released: March 17, 2025**
+
+**Take Control of Your Budget, Your Way!**
+This update introduces powerful new settings, including custom currency selection with live conversion, dynamic app width customization, and vibrant transaction visuals—making your budget smarter and more intuitive than ever before!
+
+## ✨ New & Improved
+### 💰 Dynamic Currency Selection & Live Conversion
+- Set your preferred currency in the new Settings Menu, and it will persist per device.
+- If a default currency is needed, ENV configuration allows for a global default.
+- Live currency conversion ensures that your amounts stay accurate across different currencies!
+  - Example: If you add 10 USD on USD currency option and switch to EUR, it correctly converts and shows 9.20 EUR.
+  - And, when adding 10 EUR on EUR currency option and switched back to USD, it shows $10.87 USD. Aka, live conversion with the help of something API I forgot T-T
+
+### ⚙️ Fully Customizable App Width
+- Compact or Normal mode—choose the best fit for your screen from Settings.
+- Your preference persists per device, ensuring a seamless experience.
+
+### 🎨 Colorful Categories & Transaction Backgrounds
+- Categories of each type now has a predefined, unique color, making them instantly recognizable (Red for expense and Green of income).
+- Transactions' colored backgrounds are now optional in the settings menu, but for now giving your financial history a vibrant, clean look with dark and minimal color.
+
+### 🛠️ Bug Fixes & Improvements
+- Fixed Date Picker Crash: Clearing the date no longer results in an "Invalid Date" error or a full page crash. Now, it properly resets to the first day of the current month.
+- Optimized Color & Data Handling: Transactions load faster and smoother without flickering or mismatched colors... I guess, joking of course!!!!!!!!!!!
+
+---
+
 ## v2.1.0 - Balance Toggle ⚖️
 **Released: March 15, 2025**
 
@@ -16,6 +44,18 @@ This update brings a brand-new Balance Mode Toggle, giving you full control over
 - Improved UI transitions when switching balance views.
 - Fixed a state reset issue when rapidly switching modes.
 
+## v2.0.7 - More Automated 🚀
+**Released: March 15, 2025**  
+
+This update fine-tunes Docker handling and an even smoother self-hosting process. Now, deploying is **effortless**, and keeping your app up-to-date is a breeze 😏  
+
+### ✨ **New Features**  
+- **💡 Automatic Docker Versioning**  
+  - Docker images now use the **version from `package.json`** for better tracking.  
+  - Every release is now **tagged properly**, no more overwriting images!  
+
+---
+
 ## v2.0.5 - Docker Optimization 🐋
 **Released: March 15, 2025**
 
@@ -31,7 +71,6 @@ This update brings seamless Docker versioning, ensuring self-hosters and deploym
 - Forks & self-hosted deployments now work **out of the box**.  
 - No more manual fixes—just deploy and enjoy!  
 
-
 ---
 
 ## v2.0.0 - The Ultimate Overhaul 🚀🔥

changelog.md

@@ -1,6 +1,6 @@
 {
   "name": "oops-budgeter",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack -p 3031",

package.json

@@ -15,13 +15,38 @@
  *   limitations under the License.
  */
 
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import jwt from "jsonwebtoken";
 import { cookies } from "next/headers";
 
 const SECRET = process.env.JWT_SECRET as string;
 const PASSCODE = process.env.PASSCODE as string;
 
+export async function verifyToken(req: NextRequest) {
+  const cookieStore = await cookies();
+  const tokenFromCookie = cookieStore.get("authToken")?.value;
+
+  const authHeader = req.headers.get("Authorization");
+  const tokenFromHeader =
+    authHeader && authHeader.startsWith("Bearer ")
+      ? authHeader.split(" ")[1]
+      : null;
+
+  const token = tokenFromHeader || tokenFromCookie;
+
+  if (!token) return { authorized: false, error: "Unauthorized" };
+
+  try {
+    const decoded = jwt.verify(token, SECRET);
+    return { authorized: true, user: decoded };
+  } catch (err) {
+    return {
+      authorized: false,
+      error: `Invalid or expired token, ${(err as Error).message}`,
+    };
+  }
+}
+
 export async function POST(request: Request) {
   try {
     const cookieStore = await cookies();

src/app/api/auth/itsme/route.ts

@@ -18,37 +18,9 @@
 import { db } from "@/lib/db";
 import { transactions } from "@/schema/dbSchema";
 import { eq } from "drizzle-orm";
-import { cookies } from "next/headers";
 import { NextRequest, NextResponse } from "next/server";
-import jwt from "jsonwebtoken";
 import { expenseCategories, incomeCategories } from "@/lib/categories";
-
-const SECRET = process.env.JWT_SECRET as string;
-
-async function verifyToken(req: NextRequest) {
-  const cookieStore = await cookies();
-  const tokenFromCookie = cookieStore.get("authToken")?.value;
-
-  const authHeader = req.headers.get("Authorization");
-  const tokenFromHeader =
-    authHeader && authHeader.startsWith("Bearer ")
-      ? authHeader.split(" ")[1]
-      : null;
-
-  const token = tokenFromHeader || tokenFromCookie;
-
-  if (!token) return { authorized: false, error: "Unauthorized" };
-
-  try {
-    const decoded = jwt.verify(token, SECRET);
-    return { authorized: true, user: decoded };
-  } catch (err) {
-    return {
-      authorized: false,
-      error: `Invalid or expired token, ${(err as Error).message}`,
-    };
-  }
-}
+import { verifyToken } from "../auth/login/route";
 
 export async function GET(req: NextRequest) {
   const { authorized, user, error } = await verifyToken(req);

src/app/api/auth/login/route.ts

@@ -25,6 +25,8 @@ import Toaster from "@/components/effects/Sonner";
 import { ThemeToggle } from "@/components/common/ThemeToggle";
 import Logo from "@/components/common/Logo";
 import { generateMetadata } from "@/lib/head";
+import { Settings } from "@/components/common/Settings";
+import PageLayout from "@/components/helpers/PageLayout";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -70,11 +72,12 @@ export default function RootLayout({
           <PasscodeWrapper>
             <BudgetProvider>
               <main className="p-0 md:p-6">
-                <div className="relative flex flex-col justify-center items-center gap-4 bg-secondary p-6 max-w-2xl min-w-svw md:min-w-2xl md:rounded-lg">
+                <PageLayout>
                   <Logo />
+                  <Settings />
                   <ThemeToggle />
                   {children}
-                </div>
+                </PageLayout>
               </main>
               <GoToTop />
               <Toaster />

src/app/api/transactions/route.ts

@@ -29,21 +29,21 @@ import {
   predictNextMonthSpending,
 } from "@/lib/my1DollarAI";
 
+export const chartColors = [
+  "#2DAC64",
+  "#E24444",
+  "#FFB02E",
+  "#0088FE",
+  "#FF6347",
+  "#A155B9",
+  "#45C4B0",
+  "#E4D374",
+];
+
 export default function AnalyticsWrapper() {
   const { transactions, filteredTransactions } = useBudget();
   const monthlyTrend = getMonthlyTrends(transactions);
 
-  const COLORS = [
-    "#2DAC64",
-    "#E24444",
-    "#FFB02E",
-    "#0088FE",
-    "#FF6347",
-    "#A155B9",
-    "#45C4B0",
-    "#E4D374",
-  ];
-
   const incomeData = transactions.filter((trx) => trx.type === "income");
   const expenseData = transactions.filter((trx) => trx.type === "expense");
 
@@ -65,7 +65,7 @@ export default function AnalyticsWrapper() {
     ([category, amount], index) => ({
       name: category,
       value: amount,
-      color: COLORS[index % COLORS.length],
+      color: chartColors[index % chartColors.length],
     })
   );
 
@@ -400,8 +400,8 @@ export default function AnalyticsWrapper() {
                 key={cat}
                 dataKey={cat}
                 stackId="1"
-                stroke={COLORS[idx]}
-                fill={COLORS[idx]}
+                stroke={chartColors[idx]}
+                fill={chartColors[idx]}
               />
             ))}
           </Recharts.AreaChart>

src/app/layout.tsx

@@ -14,7 +14,23 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const currencyCode = process.env.NEXT_PUBLIC_CURRENCY || "USD";
+"use client";
+
+import { useBudget } from "@/contexts/BudgetContext";
+import { useEffect, useState } from "react";
+
+export const fetchExchangeRates = async (baseCurrency: string) => {
+  try {
+    const response = await fetch(
+      `https://api.exchangerate-api.com/v4/latest/${baseCurrency}`
+    );
+    const data = await response.json();
+    return data.rates || {};
+  } catch (error) {
+    console.error("Failed to fetch exchange rates:", error);
+    return {};
+  }
+};
 
 export const formatCurrency = (amount: number, currency: string) => {
   return new Intl.NumberFormat("en-US", {
@@ -30,7 +46,48 @@ export default function PriceDisplay({
   amount: number;
   className?: string;
 }) {
-  const currency = currencyCode;
+  const { currency } = useBudget();
+  const [exchangeRates, setExchangeRates] = useState<{ [key: string]: number }>(
+    {}
+  );
+  const [convertedAmount, setConvertedAmount] = useState(amount);
+  const correctCurrency =
+    currency.length !== 3 ? "USD" : currency.toUpperCase();
+
+  useEffect(() => {
+    const fetchRates = async () => {
+      const rates = await fetchExchangeRates("USD");
+      setExchangeRates(rates);
+    };
+
+    fetchRates();
+  }, []);
+
+  useEffect(() => {
+    if (!exchangeRates || Object.keys(exchangeRates).length === 0) {
+      return;
+    }
+
+    console.log(exchangeRates[correctCurrency]);
+    if (exchangeRates[correctCurrency]) {
+      const baseRate = exchangeRates["USD"] || 1;
+      const targetRate = exchangeRates[correctCurrency] || 1;
+
+      if (!baseRate || !targetRate) {
+        console.warn("Missing exchange rate for:", correctCurrency);
+        setConvertedAmount(amount);
+        return;
+      }
+
+      setConvertedAmount((amount / baseRate) * targetRate);
+    } else {
+      setConvertedAmount(amount);
+    }
+  }, [currency, exchangeRates, amount, correctCurrency]);
 
-  return <span className={className}>{formatCurrency(amount, currency)}</span>;
+  return (
+    <span className={className}>
+      {formatCurrency(convertedAmount, correctCurrency)}
+    </span>
+  );
 }