From e7a207a60b24ee8ef7f2b79b6d456948b2cc4e7f Mon Sep 17 00:00:00 2001
From: "R. Mostalac" <4228996+Moztoo@users.noreply.github.com>
Date: Sat, 28 Feb 2026 18:13:11 -0600
Subject: [PATCH 1/6] feat: allow assigning colors to budget categories

---
 backend/src/db/mod.rs                     |   5 +
 backend/src/handlers/budget.rs            |  16 ++-
 backend/src/handlers/months.rs            |   9 +-
 backend/src/handlers/stats.rs             |   7 +-
 backend/src/models/mod.rs                 |   4 +
 frontend/src/api/client.ts                |   8 +-
 frontend/src/components/BudgetSection.tsx | 166 +++++++++++++++-------
 frontend/src/components/ItemsSection.tsx  |   9 +-
 frontend/src/components/Stats.tsx         |  12 +-
 9 files changed, 167 insertions(+), 69 deletions(-)

diff --git a/backend/src/db/mod.rs b/backend/src/db/mod.rs
index adc55ee..a7f0235 100644
--- a/backend/src/db/mod.rs
+++ b/backend/src/db/mod.rs
@@ -65,6 +65,7 @@ pub async fn run_migrations(pool: &SqlitePool) -> Result<(), sqlx::Error> {
             user_id INTEGER NOT NULL,
             label TEXT NOT NULL,
             default_amount REAL NOT NULL,
+            color TEXT NOT NULL DEFAULT '#71717a',
             FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
         )
         "#,
@@ -72,6 +73,10 @@ pub async fn run_migrations(pool: &SqlitePool) -> Result<(), sqlx::Error> {
     .execute(pool)
     .await?;
 
+    let _ = sqlx::query("ALTER TABLE budget_categories ADD COLUMN color TEXT NOT NULL DEFAULT '#71717a'")
+        .execute(pool)
+        .await;
+
     sqlx::query(
         r#"
         CREATE TABLE IF NOT EXISTS months (
diff --git a/backend/src/handlers/budget.rs b/backend/src/handlers/budget.rs
index fb450c8..3045891 100644
--- a/backend/src/handlers/budget.rs
+++ b/backend/src/handlers/budget.rs
@@ -18,6 +18,7 @@ pub struct CreateCategory {
     pub label: String,
     #[validate(range(min = 0.0))]
     pub default_amount: f64,
+    pub color: Option<String>,
 }
 
 #[derive(Deserialize, ToSchema, Validate)]
@@ -26,6 +27,7 @@ pub struct UpdateCategory {
     pub label: Option<String>,
     #[validate(range(min = 0.0))]
     pub default_amount: Option<f64>,
+    pub color: Option<String>,
 }
 
 #[derive(Deserialize, ToSchema, Validate)]
@@ -50,7 +52,7 @@ pub async fn list_categories(
     axum::Extension(claims): axum::Extension<Claims>,
 ) -> Result<Json<Vec<BudgetCategory>>, PaymeError> {
     let categories: Vec<BudgetCategory> = sqlx::query_as(
-        "SELECT id, user_id, label, default_amount FROM budget_categories WHERE user_id = ?",
+        "SELECT id, user_id, label, default_amount, color FROM budget_categories WHERE user_id = ?",
     )
     .bind(claims.sub)
     .fetch_all(&pool)
@@ -77,12 +79,14 @@ pub async fn create_category(
     Json(payload): Json<CreateCategory>,
 ) -> Result<Json<BudgetCategory>, PaymeError> {
     payload.validate()?;
+    let color = payload.color.unwrap_or_else(|| "#71717a".to_string());
     let id: i64 = sqlx::query_scalar(
-        "INSERT INTO budget_categories (user_id, label, default_amount) VALUES (?, ?, ?) RETURNING id",
+        "INSERT INTO budget_categories (user_id, label, default_amount, color) VALUES (?, ?, ?, ?) RETURNING id",
     )
     .bind(claims.sub)
     .bind(&payload.label)
     .bind(payload.default_amount)
+    .bind(&color)
     .fetch_one(&pool)
     .await?;
 
@@ -109,6 +113,7 @@ pub async fn create_category(
         user_id: claims.sub,
         label: payload.label,
         default_amount: payload.default_amount,
+        color,
     }))
 }
 
@@ -133,7 +138,7 @@ pub async fn update_category(
 ) -> Result<Json<BudgetCategory>, PaymeError> {
     payload.validate()?;
     let existing: BudgetCategory = sqlx::query_as(
-        "SELECT id, user_id, label, default_amount FROM budget_categories WHERE id = ? AND user_id = ?",
+        "SELECT id, user_id, label, default_amount, color FROM budget_categories WHERE id = ? AND user_id = ?",
     )
     .bind(category_id)
     .bind(claims.sub)
@@ -143,10 +148,12 @@ pub async fn update_category(
 
     let label = payload.label.unwrap_or(existing.label);
     let default_amount = payload.default_amount.unwrap_or(existing.default_amount);
+    let color = payload.color.unwrap_or(existing.color);
 
-    sqlx::query("UPDATE budget_categories SET label = ?, default_amount = ? WHERE id = ?")
+    sqlx::query("UPDATE budget_categories SET label = ?, default_amount = ?, color = ? WHERE id = ?")
         .bind(&label)
         .bind(default_amount)
+        .bind(&color)
         .bind(category_id)
         .execute(&pool)
         .await?;
@@ -156,6 +163,7 @@ pub async fn update_category(
         user_id: claims.sub,
         label,
         default_amount,
+        color,
     }))
 }
 
diff --git a/backend/src/handlers/months.rs b/backend/src/handlers/months.rs
index 68e5eee..798d353 100644
--- a/backend/src/handlers/months.rs
+++ b/backend/src/handlers/months.rs
@@ -334,9 +334,9 @@ async fn get_month_summary(
             .await?;
 
     let budgets: Vec<MonthlyBudgetWithCategory> =
-        sqlx::query_as::<_, (i64, i64, i64, String, f64)>(
+        sqlx::query_as::<_, (i64, i64, i64, String, String, f64)>(
             r#"
-        SELECT mb.id, mb.month_id, mb.category_id, bc.label, mb.allocated_amount
+        SELECT mb.id, mb.month_id, mb.category_id, bc.label, bc.color, mb.allocated_amount
         FROM monthly_budgets mb
         JOIN budget_categories bc ON mb.category_id = bc.id
         WHERE mb.month_id = ?
@@ -347,12 +347,13 @@ async fn get_month_summary(
         .await?
         .into_iter()
         .map(
-            |(id, month_id, category_id, category_label, allocated_amount)| {
+            |(id, month_id, category_id, category_label, category_color, allocated_amount)| {
                 MonthlyBudgetWithCategory {
                     id,
                     month_id,
                     category_id,
                     category_label,
+                    category_color,
                     allocated_amount,
                     spent_amount: 0.0,
                 }
@@ -362,7 +363,7 @@ async fn get_month_summary(
 
     let items: Vec<ItemWithCategory> = sqlx::query_as(
         r#"
-        SELECT i.id, i.month_id, i.category_id, bc.label as category_label, i.description, i.amount, i.spent_on, i.savings_destination
+        SELECT i.id, i.month_id, i.category_id, bc.label as category_label, bc.color as category_color, i.description, i.amount, i.spent_on, i.savings_destination
         FROM items i
         JOIN budget_categories bc ON i.category_id = bc.id
         WHERE i.month_id = ?
diff --git a/backend/src/handlers/stats.rs b/backend/src/handlers/stats.rs
index 6f09dbd..3100854 100644
--- a/backend/src/handlers/stats.rs
+++ b/backend/src/handlers/stats.rs
@@ -92,13 +92,13 @@ pub async fn get_stats(
         let current_month_id = months[0].0;
         let previous_month_id = months.get(1).map(|m| m.0);
 
-        let categories: Vec<(i64, String)> =
-            sqlx::query_as("SELECT id, label FROM budget_categories WHERE user_id = ?")
+        let categories: Vec<(i64, String, String)> =
+            sqlx::query_as("SELECT id, label, color FROM budget_categories WHERE user_id = ?")
                 .bind(claims.sub)
                 .fetch_all(&pool)
                 .await?;
 
-        for (cat_id, cat_label) in categories {
+        for (cat_id, cat_label, cat_color) in categories {
             let current_spent: (f64,) = sqlx::query_as(
                 "SELECT COALESCE(SUM(amount), 0.0) FROM items WHERE month_id = ? AND category_id = ? AND savings_destination = 'none'",
             )
@@ -130,6 +130,7 @@ pub async fn get_stats(
             category_comparisons.push(CategoryStats {
                 category_id: cat_id,
                 category_label: cat_label,
+                category_color: cat_color,
                 current_month_spent: current_spent.0,
                 previous_month_spent: previous_spent,
                 change_amount,
diff --git a/backend/src/models/mod.rs b/backend/src/models/mod.rs
index d2ece65..3b7e20b 100644
--- a/backend/src/models/mod.rs
+++ b/backend/src/models/mod.rs
@@ -33,6 +33,7 @@ pub struct BudgetCategory {
     pub user_id: i64,
     pub label: String,
     pub default_amount: f64,
+    pub color: String,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize, sqlx::FromRow, ToSchema)]
@@ -78,6 +79,7 @@ pub struct MonthlyBudgetWithCategory {
     pub month_id: i64,
     pub category_id: i64,
     pub category_label: String,
+    pub category_color: String,
     pub allocated_amount: f64,
     pub spent_amount: f64,
 }
@@ -103,6 +105,7 @@ pub struct ItemWithCategory {
     pub month_id: i64,
     pub category_id: i64,
     pub category_label: String,
+    pub category_color: String,
     pub description: String,
     pub amount: f64,
     pub spent_on: NaiveDate,
@@ -113,6 +116,7 @@ pub struct ItemWithCategory {
 pub struct CategoryStats {
     pub category_id: i64,
     pub category_label: String,
+    pub category_color: String,
     pub current_month_spent: f64,
     pub previous_month_spent: f64,
     pub change_amount: f64,
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index aa9cf86..055f437 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -92,12 +92,12 @@ export const api = {
 
   categories: {
     list: () => request<BudgetCategory[]>("/categories"),
-    create: (data: { label: string; default_amount: number }) =>
+    create: (data: { label: string; default_amount: number; color?: string }) =>
       request<BudgetCategory>("/categories", {
         method: "POST",
         body: JSON.stringify(data),
       }),
-    update: (id: number, data: { label?: string; default_amount?: number }) =>
+    update: (id: number, data: { label?: string; default_amount?: number; color?: string }) =>
       request<BudgetCategory>(`/categories/${id}`, {
         method: "PUT",
         body: JSON.stringify(data),
@@ -282,6 +282,7 @@ export interface BudgetCategory {
   user_id: number;
   label: string;
   default_amount: number;
+  color: string;
 }
 
 export interface MonthlyBudget {
@@ -296,6 +297,7 @@ export interface MonthlyBudgetWithCategory {
   month_id: number;
   category_id: number;
   category_label: string;
+  category_color: string;
   allocated_amount: number;
   spent_amount: number;
 }
@@ -319,6 +321,7 @@ export interface Item {
 
 export interface ItemWithCategory extends Item {
   category_label: string;
+  category_color: string;
 }
 
 export interface MonthlySavings {
@@ -346,6 +349,7 @@ export interface MonthSummary {
 export interface CategoryStats {
   category_id: number;
   category_label: string;
+  category_color: string;
   current_month_spent: number;
   previous_month_spent: number;
   change_amount: number;
diff --git a/frontend/src/components/BudgetSection.tsx b/frontend/src/components/BudgetSection.tsx
index 8596ab6..4dbe633 100644
--- a/frontend/src/components/BudgetSection.tsx
+++ b/frontend/src/components/BudgetSection.tsx
@@ -30,22 +30,38 @@ export function BudgetSection({
   const [editingBudgetId, setEditingBudgetId] = useState<number | null>(null);
   const [label, setLabel] = useState("");
   const [amount, setAmount] = useState("");
+  const [color, setColor] = useState("#71717a");
+
+  const PRESET_COLORS = [
+    "#71717a", // Zinc
+    "#ef4444", // Red
+    "#f97316", // Orange
+    "#f59e0b", // Amber
+    "#10b981", // Emerald
+    "#06b6d4", // Cyan
+    "#3b82f6", // Blue
+    "#6366f1", // Indigo
+    "#8b5cf6", // Violet
+    "#d946ef", // Fuchsia
+  ];
 
   const handleAddCategory = async () => {
     if (!label || !amount) return;
-    await api.categories.create({ label, default_amount: parseFloat(amount) });
+    await api.categories.create({ label, default_amount: parseFloat(amount), color });
     setLabel("");
     setAmount("");
+    setColor("#71717a");
     setIsAddingCategory(false);
     await onUpdate();
   };
 
   const handleUpdateCategory = async (id: number) => {
     if (!label || !amount) return;
-    await api.categories.update(id, { label, default_amount: parseFloat(amount) });
+    await api.categories.update(id, { label, default_amount: parseFloat(amount), color });
     setEditingCategoryId(null);
     setLabel("");
     setAmount("");
+    setColor("#71717a");
     await onUpdate();
   };
 
@@ -66,6 +82,7 @@ export function BudgetSection({
     setEditingCategoryId(cat.id);
     setLabel(cat.label);
     setAmount(cat.default_amount.toString());
+    setColor(cat.color);
   };
 
   const startEditBudget = (budget: MonthlyBudgetWithCategory) => {
@@ -78,6 +95,7 @@ export function BudgetSection({
     setEditingBudgetId(null);
     setLabel("");
     setAmount("");
+    setColor("#71717a");
     setIsAddingCategory(false);
   };
 
@@ -128,9 +146,15 @@ export function BudgetSection({
               ) : (
                 <div>
                   <div className="flex items-center justify-between mb-1">
-                    <span className="text-sm text-charcoal-700 dark:text-sand-300">
-                      {budget.category_label}
-                    </span>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-2 h-2 rounded-full"
+                        style={{ backgroundColor: budget.category_color }}
+                      />
+                      <span className="text-sm text-charcoal-700 dark:text-sand-300">
+                        {budget.category_label}
+                      </span>
+                    </div>
                     <div className="flex items-center gap-2">
                       <span className="text-xs text-charcoal-500 dark:text-charcoal-400">
                         {formatCurrency(budget.spent_amount)} / {formatCurrency(budget.allocated_amount)}
@@ -166,38 +190,60 @@ export function BudgetSection({
           {categories.map((cat) => (
             <div key={cat.id}>
               {editingCategoryId === cat.id ? (
-                <div className="flex items-end gap-2">
-                  <div className="flex-1">
-                    <Input
-                      placeholder="Label"
-                      value={label}
-                      onChange={(e) => setLabel(e.target.value)}
-                    />
+                <div className="space-y-3 p-3 bg-sand-100 dark:bg-charcoal-900/50 rounded-lg">
+                  <div className="flex items-end gap-2">
+                    <div className="flex-1">
+                      <Input
+                        placeholder="Label"
+                        value={label}
+                        onChange={(e) => setLabel(e.target.value)}
+                      />
+                    </div>
+                    <div className="w-24">
+                      <Input
+                        type="number"
+                        placeholder="Default"
+                        value={amount}
+                        onChange={(e) => setAmount(e.target.value)}
+                      />
+                    </div>
                   </div>
-                  <div className="w-24">
-                    <Input
-                      type="number"
-                      placeholder="Default"
-                      value={amount}
-                      onChange={(e) => setAmount(e.target.value)}
-                    />
+                  <div className="flex flex-wrap gap-1.5">
+                    {PRESET_COLORS.map((c) => (
+                      <button
+                        key={c}
+                        onClick={() => setColor(c)}
+                        className={`w-6 h-6 rounded-full border-2 transition-all ${
+                          color === c ? "border-charcoal-800 dark:border-sand-200 scale-110" : "border-transparent hover:scale-105"
+                        }`}
+                        style={{ backgroundColor: c }}
+                      />
+                    ))}
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <button
+                      onClick={() => handleUpdateCategory(cat.id)}
+                      className="p-2 text-sage-600 hover:bg-sage-100 dark:hover:bg-charcoal-800"
+                    >
+                      <Check size={16} />
+                    </button>
+                    <button
+                      onClick={cancelEdit}
+                      className="p-2 text-charcoal-500 hover:bg-sand-200 dark:hover:bg-charcoal-800"
+                    >
+                      <X size={16} />
+                    </button>
                   </div>
-                  <button
-                    onClick={() => handleUpdateCategory(cat.id)}
-                    className="p-2 text-sage-600 hover:bg-sage-100 dark:hover:bg-charcoal-800"
-                  >
-                    <Check size={16} />
-                  </button>
-                  <button
-                    onClick={cancelEdit}
-                    className="p-2 text-charcoal-500 hover:bg-sand-200 dark:hover:bg-charcoal-800"
-                  >
-                    <X size={16} />
-                  </button>
                 </div>
               ) : (
                 <div className="flex items-center justify-between py-2 border-b border-sand-200 dark:border-charcoal-800">
-                  <span className="text-sm">{cat.label}</span>
+                  <div className="flex items-center gap-2">
+                    <div
+                      className="w-3 h-3 rounded-full"
+                      style={{ backgroundColor: cat.color }}
+                    />
+                    <span className="text-sm">{cat.label}</span>
+                  </div>
                   <div className="flex items-center gap-2">
                     <span className="text-xs text-charcoal-500">
                       {formatCurrency(cat.default_amount)}
@@ -221,28 +267,44 @@ export function BudgetSection({
           ))}
 
           {isAddingCategory ? (
-            <div className="flex items-end gap-2 pt-2">
-              <div className="flex-1">
-                <Input
-                  placeholder="Category name"
-                  value={label}
-                  onChange={(e) => setLabel(e.target.value)}
-                />
+            <div className="space-y-3 p-3 bg-sand-100 dark:bg-charcoal-900/50 rounded-lg pt-2">
+              <div className="flex items-end gap-2">
+                <div className="flex-1">
+                  <Input
+                    placeholder="Category name"
+                    value={label}
+                    onChange={(e) => setLabel(e.target.value)}
+                  />
+                </div>
+                <div className="w-24">
+                  <Input
+                    type="number"
+                    placeholder="Default"
+                    value={amount}
+                    onChange={(e) => setAmount(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="flex flex-wrap gap-1.5">
+                {PRESET_COLORS.map((c) => (
+                  <button
+                    key={c}
+                    onClick={() => setColor(c)}
+                    className={`w-6 h-6 rounded-full border-2 transition-all ${
+                      color === c ? "border-charcoal-800 dark:border-sand-200 scale-110" : "border-transparent hover:scale-105"
+                    }`}
+                    style={{ backgroundColor: c }}
+                  />
+                ))}
               </div>
-              <div className="w-24">
-                <Input
-                  type="number"
-                  placeholder="Default"
-                  value={amount}
-                  onChange={(e) => setAmount(e.target.value)}
-                />
+              <div className="flex justify-end gap-2">
+                <Button size="sm" onClick={handleAddCategory}>
+                  <Check size={16} className="mr-1" /> Add
+                </Button>
+                <Button size="sm" variant="ghost" onClick={cancelEdit}>
+                  <X size={16} className="mr-1" /> Cancel
+                </Button>
               </div>
-              <Button size="sm" onClick={handleAddCategory}>
-                <Check size={16} />
-              </Button>
-              <Button size="sm" variant="ghost" onClick={cancelEdit}>
-                <X size={16} />
-              </Button>
             </div>
           ) : (
             <Button
diff --git a/frontend/src/components/ItemsSection.tsx b/frontend/src/components/ItemsSection.tsx
index 7c894a9..868a295 100644
--- a/frontend/src/components/ItemsSection.tsx
+++ b/frontend/src/components/ItemsSection.tsx
@@ -361,7 +361,14 @@ export function ItemsSection({
                       </div>
                     </td>
                     <td className="py-2 px-1">
-                      <span className="text-[10px] md:text-xs px-1.5 md:px-2 py-0.5 md:py-1 bg-sand-200 dark:bg-charcoal-800 text-charcoal-600 dark:text-sand-400 whitespace-nowrap">
+                      <span
+                        className="text-[10px] md:text-xs px-1.5 md:px-2 py-0.5 md:py-1 rounded-full border whitespace-nowrap"
+                        style={{
+                          backgroundColor: `${item.category_color}20`,
+                          color: item.category_color,
+                          borderColor: `${item.category_color}40`,
+                        }}
+                      >
                         {item.category_label}
                       </span>
                     </td>
diff --git a/frontend/src/components/Stats.tsx b/frontend/src/components/Stats.tsx
index c9f4fe9..939b613 100644
--- a/frontend/src/components/Stats.tsx
+++ b/frontend/src/components/Stats.tsx
@@ -140,9 +140,15 @@ export function Stats() {
                       key={cat.category_id}
                       className="flex items-center justify-between py-2 border-b border-sand-200 dark:border-charcoal-700"
                     >
-                      <span className="text-sm text-charcoal-700 dark:text-sand-300">
-                        {cat.category_label}
-                      </span>
+                      <div className="flex items-center gap-2">
+                        <div
+                          className="w-2.5 h-2.5 rounded-full"
+                          style={{ backgroundColor: cat.category_color }}
+                        />
+                        <span className="text-sm text-charcoal-700 dark:text-sand-300">
+                          {cat.category_label}
+                        </span>
+                      </div>
                       <div className="flex items-center gap-3">
                         <span className="text-sm text-charcoal-600 dark:text-charcoal-400">
                           {formatCurrency(cat.current_month_spent)}

From e335fdd87c251eb9111d585532904e2e6bd99991 Mon Sep 17 00:00:00 2001
From: "R. Mostalac" <14228996+Moztoo@users.noreply.github.com>
Date: Sun, 1 Mar 2026 23:11:55 -0600
Subject: [PATCH 2/6] Update to make category labels "rounded-sm"

---
 frontend/src/components/BudgetSection.tsx | 8 ++++----
 frontend/src/components/ItemsSection.tsx  | 2 +-
 frontend/src/components/Stats.tsx         | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/BudgetSection.tsx b/frontend/src/components/BudgetSection.tsx
index 4dbe633..909fbea 100644
--- a/frontend/src/components/BudgetSection.tsx
+++ b/frontend/src/components/BudgetSection.tsx
@@ -148,7 +148,7 @@ export function BudgetSection({
                   <div className="flex items-center justify-between mb-1">
                     <div className="flex items-center gap-2">
                       <div
-                        className="w-2 h-2 rounded-full"
+                        className="w-2 h-2 rounded-sm"
                         style={{ backgroundColor: budget.category_color }}
                       />
                       <span className="text-sm text-charcoal-700 dark:text-sand-300">
@@ -213,7 +213,7 @@ export function BudgetSection({
                       <button
                         key={c}
                         onClick={() => setColor(c)}
-                        className={`w-6 h-6 rounded-full border-2 transition-all ${
+                        className={`w-6 h-6 rounded-sm border-2 transition-all ${
                           color === c ? "border-charcoal-800 dark:border-sand-200 scale-110" : "border-transparent hover:scale-105"
                         }`}
                         style={{ backgroundColor: c }}
@@ -239,7 +239,7 @@ export function BudgetSection({
                 <div className="flex items-center justify-between py-2 border-b border-sand-200 dark:border-charcoal-800">
                   <div className="flex items-center gap-2">
                     <div
-                      className="w-3 h-3 rounded-full"
+                      className="w-3 h-3 rounded-sm"
                       style={{ backgroundColor: cat.color }}
                     />
                     <span className="text-sm">{cat.label}</span>
@@ -290,7 +290,7 @@ export function BudgetSection({
                   <button
                     key={c}
                     onClick={() => setColor(c)}
-                    className={`w-6 h-6 rounded-full border-2 transition-all ${
+                    className={`w-6 h-6 rounded-sm border-2 transition-all ${
                       color === c ? "border-charcoal-800 dark:border-sand-200 scale-110" : "border-transparent hover:scale-105"
                     }`}
                     style={{ backgroundColor: c }}
diff --git a/frontend/src/components/ItemsSection.tsx b/frontend/src/components/ItemsSection.tsx
index 868a295..929718e 100644
--- a/frontend/src/components/ItemsSection.tsx
+++ b/frontend/src/components/ItemsSection.tsx
@@ -362,7 +362,7 @@ export function ItemsSection({
                     </td>
                     <td className="py-2 px-1">
                       <span
-                        className="text-[10px] md:text-xs px-1.5 md:px-2 py-0.5 md:py-1 rounded-full border whitespace-nowrap"
+                        className="text-[10px] md:text-xs px-1.5 md:px-2 py-0.5 md:py-1 rounded-sm border whitespace-nowrap"
                         style={{
                           backgroundColor: `${item.category_color}20`,
                           color: item.category_color,
diff --git a/frontend/src/components/Stats.tsx b/frontend/src/components/Stats.tsx
index 939b613..7ce36c4 100644
--- a/frontend/src/components/Stats.tsx
+++ b/frontend/src/components/Stats.tsx
@@ -142,7 +142,7 @@ export function Stats() {
                     >
                       <div className="flex items-center gap-2">
                         <div
-                          className="w-2.5 h-2.5 rounded-full"
+                          className="w-2.5 h-2.5 rounded-sm"
                           style={{ backgroundColor: cat.category_color }}
                         />
                         <span className="text-sm text-charcoal-700 dark:text-sand-300">

From 224a1c514ad655e9730b03ac0f0164eccc7b88d9 Mon Sep 17 00:00:00 2001
From: "R. Mostalac" <4228996+Moztoo@users.noreply.github.com>
Date: Sun, 1 Mar 2026 23:20:20 -0600
Subject: [PATCH 3/6] test(backend): update PDF test data to include
 category_color

---
 backend/src/pdf/mod.rs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/backend/src/pdf/mod.rs b/backend/src/pdf/mod.rs
index d17b7ad..7b64d0b 100644
--- a/backend/src/pdf/mod.rs
+++ b/backend/src/pdf/mod.rs
@@ -146,6 +146,7 @@ mod tests {
                 month_id: 1,
                 category_id: 1,
                 category_label: "Food".to_string(),
+                category_color: "#71717a".to_string(),
                 allocated_amount: 500.0,
                 spent_amount: 300.0,
             }],
@@ -154,6 +155,7 @@ mod tests {
                 month_id: 1,
                 category_id: 1,
                 category_label: "Food".to_string(),
+                category_color: "#71717a".to_string(),
                 description: "Groceries".to_string(),
                 amount: 150.0,
                 spent_on: NaiveDate::from_ymd_opt(2024, 6, 15).unwrap(),

From dd9df9283ee5969b6d71cfd835465de6bd4a03c5 Mon Sep 17 00:00:00 2001
From: "R. Mostalac" <4228996+Moztoo@users.noreply.github.com>
Date: Sun, 1 Mar 2026 23:31:49 -0600
Subject: [PATCH 4/6] fix(backend,frontend): resolve 500 errors by adding color
 field to queries and tests

---
 backend/src/handlers/export.rs | 7 +++++--
 backend/src/handlers/items.rs  | 2 +-
 backend/tests/common/mod.rs    | 4 +++-
 backend/tests/export_tests.rs  | 6 +++---
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/backend/src/handlers/export.rs b/backend/src/handlers/export.rs
index 7ec48f0..67a66c0 100644
--- a/backend/src/handlers/export.rs
+++ b/backend/src/handlers/export.rs
@@ -27,6 +27,7 @@ pub struct FixedExpenseExport {
 pub struct CategoryExport {
     pub label: String,
     pub default_amount: f64,
+    pub color: String,
 }
 
 #[derive(Serialize, Deserialize, ToSchema)]
@@ -95,7 +96,7 @@ pub async fn export_json(
             .await?;
 
     let categories: Vec<BudgetCategory> = sqlx::query_as(
-        "SELECT id, user_id, label, default_amount FROM budget_categories WHERE user_id = ?",
+        "SELECT id, user_id, label, default_amount, color FROM budget_categories WHERE user_id = ?",
     )
     .bind(claims.sub)
     .fetch_all(&pool)
@@ -188,6 +189,7 @@ pub async fn export_json(
             .map(|c| CategoryExport {
                 label: c.label,
                 default_amount: c.default_amount,
+                color: c.color,
             })
             .collect(),
         months: month_exports,
@@ -278,11 +280,12 @@ pub async fn import_json(
     let mut category_map: std::collections::HashMap<String, i64> = std::collections::HashMap::new();
     for cat in &data.categories {
         let id: i64 = sqlx::query_scalar(
-            "INSERT INTO budget_categories (user_id, label, default_amount) VALUES (?, ?, ?) RETURNING id",
+            "INSERT INTO budget_categories (user_id, label, default_amount, color) VALUES (?, ?, ?, ?) RETURNING id",
         )
         .bind(claims.sub)
         .bind(&cat.label)
         .bind(cat.default_amount)
+        .bind(&cat.color)
         .fetch_one(&mut *tx)
         .await?;
         category_map.insert(cat.label.clone(), id);
diff --git a/backend/src/handlers/items.rs b/backend/src/handlers/items.rs
index 32445cd..2d89a11 100644
--- a/backend/src/handlers/items.rs
+++ b/backend/src/handlers/items.rs
@@ -60,7 +60,7 @@ pub async fn list_items(
 
     let items: Vec<ItemWithCategory> = sqlx::query_as(
         r#"
-        SELECT i.id, i.month_id, i.category_id, bc.label as category_label, i.description, i.amount, i.spent_on, i.savings_destination
+        SELECT i.id, i.month_id, i.category_id, bc.label as category_label, bc.color as category_color, i.description, i.amount, i.spent_on, i.savings_destination
         FROM items i
         JOIN budget_categories bc ON i.category_id = bc.id
         WHERE i.month_id = ?
diff --git a/backend/tests/common/mod.rs b/backend/tests/common/mod.rs
index e6700e7..5129562 100644
--- a/backend/tests/common/mod.rs
+++ b/backend/tests/common/mod.rs
@@ -71,6 +71,7 @@ async fn run_migrations(pool: &SqlitePool) {
             user_id INTEGER NOT NULL,
             label TEXT NOT NULL,
             default_amount REAL NOT NULL,
+            color TEXT NOT NULL DEFAULT '#71717a',
             FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
         )
         "#,
@@ -260,11 +261,12 @@ pub async fn create_test_category(
     default_amount: f64,
 ) -> i64 {
     sqlx::query_scalar::<_, i64>(
-        "INSERT INTO budget_categories (user_id, label, default_amount) VALUES (?, ?, ?) RETURNING id",
+        "INSERT INTO budget_categories (user_id, label, default_amount, color) VALUES (?, ?, ?, ?) RETURNING id",
     )
     .bind(user_id)
     .bind(label)
     .bind(default_amount)
+    .bind("#71717a")
     .fetch_one(pool)
     .await
     .expect("Failed to create test category")
diff --git a/backend/tests/export_tests.rs b/backend/tests/export_tests.rs
index 862189a..c11eda0 100644
--- a/backend/tests/export_tests.rs
+++ b/backend/tests/export_tests.rs
@@ -60,8 +60,8 @@ async fn test_import_json() {
             {"label": "Internet", "amount": 80.0}
         ],
         "categories": [
-            {"label": "Food", "default_amount": 500.0},
-            {"label": "Transport", "default_amount": 200.0}
+            {"label": "Food", "default_amount": 500.0, "color": "#ef4444"},
+            {"label": "Transport", "default_amount": 200.0, "color": "#3b82f6"}
         ],
         "months": [
             {
@@ -162,7 +162,7 @@ async fn test_import_json_replaces_existing() {
             {"label": "New Expense", "amount": 200.0}
         ],
         "categories": [
-            {"label": "New Category", "default_amount": 300.0}
+            {"label": "New Category", "default_amount": 300.0, "color": "#71717a"}
         ],
         "months": []
     });

From 3134624d9f2645f50f80a1b84c29219220e4d46d Mon Sep 17 00:00:00 2001
From: "R. Mostalac" <4228996+Moztoo@users.noreply.github.com>
Date: Mon, 2 Mar 2026 00:00:45 -0600
Subject: [PATCH 5/6] style: apply cargo fmt to backend

---
 backend/src/db/mod.rs          |  8 +++++---
 backend/src/handlers/budget.rs | 16 +++++++++-------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/backend/src/db/mod.rs b/backend/src/db/mod.rs
index a7f0235..ec04c2d 100644
--- a/backend/src/db/mod.rs
+++ b/backend/src/db/mod.rs
@@ -73,9 +73,11 @@ pub async fn run_migrations(pool: &SqlitePool) -> Result<(), sqlx::Error> {
     .execute(pool)
     .await?;
 
-    let _ = sqlx::query("ALTER TABLE budget_categories ADD COLUMN color TEXT NOT NULL DEFAULT '#71717a'")
-        .execute(pool)
-        .await;
+    let _ = sqlx::query(
+        "ALTER TABLE budget_categories ADD COLUMN color TEXT NOT NULL DEFAULT '#71717a'",
+    )
+    .execute(pool)
+    .await;
 
     sqlx::query(
         r#"
diff --git a/backend/src/handlers/budget.rs b/backend/src/handlers/budget.rs
index 3045891..c51e6b5 100644
--- a/backend/src/handlers/budget.rs
+++ b/backend/src/handlers/budget.rs
@@ -150,13 +150,15 @@ pub async fn update_category(
     let default_amount = payload.default_amount.unwrap_or(existing.default_amount);
     let color = payload.color.unwrap_or(existing.color);
 
-    sqlx::query("UPDATE budget_categories SET label = ?, default_amount = ?, color = ? WHERE id = ?")
-        .bind(&label)
-        .bind(default_amount)
-        .bind(&color)
-        .bind(category_id)
-        .execute(&pool)
-        .await?;
+    sqlx::query(
+        "UPDATE budget_categories SET label = ?, default_amount = ?, color = ? WHERE id = ?",
+    )
+    .bind(&label)
+    .bind(default_amount)
+    .bind(&color)
+    .bind(category_id)
+    .execute(&pool)
+    .await?;
 
     Ok(Json(BudgetCategory {
         id: category_id,

From 7a14ff30b8dfb79969e22d6022083b365ffe0a9a Mon Sep 17 00:00:00 2001
From: "R. Mostalac" <14228996+Moztoo@users.noreply.github.com>
Date: Mon, 2 Mar 2026 00:37:35 -0600
Subject: [PATCH 6/6] style: apply cargo fmt to backend

---
 backend/src/db/mod.rs          |  8 +++++---
 backend/src/handlers/budget.rs | 16 +++++++++-------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/backend/src/db/mod.rs b/backend/src/db/mod.rs
index a7f0235..ec04c2d 100644
--- a/backend/src/db/mod.rs
+++ b/backend/src/db/mod.rs
@@ -73,9 +73,11 @@ pub async fn run_migrations(pool: &SqlitePool) -> Result<(), sqlx::Error> {
     .execute(pool)
     .await?;
 
-    let _ = sqlx::query("ALTER TABLE budget_categories ADD COLUMN color TEXT NOT NULL DEFAULT '#71717a'")
-        .execute(pool)
-        .await;
+    let _ = sqlx::query(
+        "ALTER TABLE budget_categories ADD COLUMN color TEXT NOT NULL DEFAULT '#71717a'",
+    )
+    .execute(pool)
+    .await;
 
     sqlx::query(
         r#"
diff --git a/backend/src/handlers/budget.rs b/backend/src/handlers/budget.rs
index 3045891..c51e6b5 100644
--- a/backend/src/handlers/budget.rs
+++ b/backend/src/handlers/budget.rs
@@ -150,13 +150,15 @@ pub async fn update_category(
     let default_amount = payload.default_amount.unwrap_or(existing.default_amount);
     let color = payload.color.unwrap_or(existing.color);
 
-    sqlx::query("UPDATE budget_categories SET label = ?, default_amount = ?, color = ? WHERE id = ?")
-        .bind(&label)
-        .bind(default_amount)
-        .bind(&color)
-        .bind(category_id)
-        .execute(&pool)
-        .await?;
+    sqlx::query(
+        "UPDATE budget_categories SET label = ?, default_amount = ?, color = ? WHERE id = ?",
+    )
+    .bind(&label)
+    .bind(default_amount)
+    .bind(&color)
+    .bind(category_id)
+    .execute(&pool)
+    .await?;
 
     Ok(Json(BudgetCategory {
         id: category_id,