Categories - Cashify

Categories are the organizational backbone of Cashify. They help you classify transactions into meaningful groups like “Groceries”, “Salary”, “Entertainment”, etc., enabling powerful insights into your spending and earning patterns.

Overview

Custom Icons

Choose from hundreds of icons to visually represent each category

Color Coding

Assign colors for quick visual identification

Type-Based

Separate categories for income and expenses

Category Types

Cashify supports several category types:

Income
Expense
Special Types

Categories for money coming into your accounts:Common Examples:

Salary
Freelance Income
Investments
Gifts Received
Refunds
Side Hustle

Income categories appear with a green up arrow indicator throughout the app.

Creating a Category

Navigate to Category Creation

Go to the Categories page and click + Category, or visit /categories/create

Choose Category Icon

Click the placeholder image to open the icon selector modal.

Icon Selection Features

Search functionality - Type to filter icons in real-time
Visual grid - Browse hundreds of icon options
Live preview - See how the icon looks before selecting

// Icons are stored as PNG files in public/images/categories/
$icons = File::files(public_path("images/categories"));

Available icons include:

3d-printer
air-hockey
anchor
apple
atm-machine
balloons
And hundreds more…

Use the search bar to quickly find relevant icons. For example, search “food” to find food-related icons.

Enter Category Name

Type a descriptive name for the category (e.g., “Groceries”, “Monthly Salary”, “Gas”).

Naming Best Practices

Be specific: “Grocery Shopping” is better than “Food”
Use consistent naming: Decide on a style and stick to it
Avoid duplicates: Check existing categories before creating new ones
Keep it short: Long names may be truncated in some views

Select Category Type

Choose between Expense and Income using the radio buttons.

Once created, the category type determines how transactions using this category affect your accounts. Choose carefully!

Pick a Color

Select a color from the palette to visually distinguish this category.

Color System

Categories use shade 200 (lighter than accounts which use shade 300):

public $shade = 200;

Colors are displayed:

On the category card
Next to transactions in lists
In charts and visualizations
In category selection interfaces

Use consistent color schemes - for example, all food-related categories in shades of green, entertainment in purple, etc.

Save the Category

Click Add Category to create it. You’ll be redirected to the categories page with your new category visible in the appropriate tab (Income or Expense).

Viewing Categories

The categories index page (/categories) displays your categories organized by type.

Tabbed Interface

Categories are separated into two tabs:

Expense Categories
Income Categories

The default tab showing all expense categories.Features:

Search bar to filter categories by name
Grid layout of category cards
Transaction count for each category
Quick actions (Edit, Delete)

Category Card Display

Each category card shows:

Icon - Visual representation of the category
Name - Category title
Color indicator - Small circular badge in the category’s color
Transaction count - Number of transactions using this category
Action buttons - Edit and Delete options

Search Functionality

Both tabs include a search feature:

<x-forms.input 
    placeholder="Search your categories..."
    hx-post="{{ route('categories.searchCategories', 'expense') }}"
    hx-trigger="input changed delay:300ms, search"
    hx-target="#expense-list"/>

Search uses HTMX with a 300ms delay to avoid excessive server requests while typing.

Editing Categories

Click the Edit button on any category to modify its details.

What You Can Change

Name
Icon
Color
Type

Update the category name at any time. This affects how the category appears throughout the app.

Change between Income and Expense types.

Changing the type can have significant effects:

Existing transactions will change from income to expense (or vice versa)
This affects account balances and net worth calculations
The category moves to the other tab

Type Change Behavior

if ($oldType !== $category->type) {
    $urlParams = $category->type === 'income' ? ['tab' => '2'] : [];
    
    return HtmxResponse::addFragment('categories.show', 'panel', ['category' => $category])
        ->location(route('categories.index', $urlParams))
        ->retarget('#'.$category->type.'-list')
        ->reswap('afterbegin');
}

The category smoothly transitions to the appropriate tab using HTMX.

HTMX-Powered Editing

Category editing uses HTMX for a seamless experience:

if ($request->isHtmxRequest()) {
    return HtmxResponse::addFragment('categories.edit', 'form', $data);
}

This means:

No page reloads when opening the edit form
Instant updates when saving changes
Smooth transitions between view and edit modes

Deleting Categories

Be cautious when deleting categories! Consider the following:

You cannot delete categories that have associated transactions
System categories (Transfer, Correction) cannot be deleted
Deletion is permanent and cannot be undone

Deletion Process

Click Delete Button

The delete button appears on each category card.

Confirm Deletion

A confirmation modal appears to prevent accidental deletions.

Category Removed

$category->delete();
return '';

The category card disappears smoothly without a page reload.

If you no longer use a category but want to keep historical data, consider creating a new category with a similar name instead of deleting the old one.

Icon Management

Cashify provides extensive icon customization options.

Icon Storage

Icons are stored as PNG files in:

public/images/categories/

You can add custom icons by:

Creating or downloading PNG icons
Placing them in the public/images/categories/ directory
They’ll automatically appear in the icon picker

Icon Search

The icon picker includes real-time search:

<x-forms.input 
    hx-post="{{ route('categories.searchIcons') }}"
    hx-trigger="input changed delay:300ms, search"
    hx-target="#icon-list"/>

Search functionality:

Filters icons as you type
Searches icon filenames
Updates results in real-time
No page reload required

Icon filenames should be descriptive for better search results (e.g., “grocery-cart.png” instead of “icon1.png”).

Color Customization

Categories use the HasColor trait for consistent color handling.

Color Shade

Categories use a lighter shade (200) compared to accounts (300):

public $shade = 200;

This creates visual differentiation between categories and accounts throughout the interface.

Available Colors

The color palette is defined in the HasColor trait:

public static function getAvailableColors(): array
{
    return [
        'red', 'orange', 'yellow', 'green', 'teal', 
        'blue', 'indigo', 'purple', 'pink', 'gray'
    ];
}

Color Application

Colors appear in multiple contexts:

Category Cards
Transaction Lists
Category Selection

<div class="block w-4 h-4 rounded-full {{ $category->color_class }}"></div>

Small circular color indicators on category cards

Each transaction shows its category color:

<x-transactions.row
    :category-color="$transaction->category->color_class"
    :category-icon="$transaction->category->icon"/>

When creating transactions, categories display with their colors:

<x-forms.radio.category 
    :color="$category->color_class"
    :categoryColor="$category->color"
    :image="$category->icon">
    {{ $category->name }}
</x-forms.radio.category>

Category Usage in Transactions

Categories are integral to the transaction system.

Automatic Amount Handling

When creating transactions, the category type determines amount sign:

$category = Category::findOrFail($attributes['category_id']);

if ($category->type == 'expense') {
    $attributes['amount'] = -abs($attributes['amount']);
}

Expense categories - Amounts stored as negative
Income categories - Amounts stored as positive
Users enter positive numbers - System handles the sign automatically

Category Filtering

In transaction creation/editing forms, categories are filtered by type:

$categories = Auth::user()
    ->categories()
    ->where('type', $transaction->category->type)
    ->orderBy('name', 'asc')
    ->get();

This prevents users from changing an expense to an income (or vice versa) during editing.

Best Practices

Create Specific Categories

Instead of generic “Food”, use “Groceries”, “Dining Out”, “Coffee Shops”

Limit Category Count

Too many categories makes reporting less useful. Aim for 10-20 per type.

Use Meaningful Icons

Choose icons that clearly represent the category purpose

Consistent Color Schemes

Group related categories with similar colors (all housing in blue, all food in green, etc.)

Review Periodically

Merge or delete unused categories to keep your system clean

Plan Before Creating

Think about reporting needs - how do you want to view your spending?

Category Organization Strategies

By Life Area
By Necessity Level
By Payment Frequency

Organize by Major Life Categories

Housing

Rent/Mortgage
Utilities
Home Maintenance
Home Insurance

Transportation

Car Payment
Gas
Car Insurance
Public Transit

Personal

Clothing
Healthcare
Fitness
Personal Care

The best organization strategy depends on your personal financial goals and how you want to analyze your spending.

Category Analytics

Categories power several analytical features:

Spending by Category Chart

The dashboard displays a bar chart showing expense totals by category:

// From app/Charts/SpendingChart.php
$categories = Auth::user()->categories()->where('type', 'expense')->get();

foreach ($categories as $category) {
    $totalAmount = abs(Transaction::where('category_id', $category->id)->sum('amount'));
    $data[] = $totalAmount;
    $labels[] = $category->name;
}

Transaction Filtering

On the transactions page, you can filter by specific categories:

if ($this->request->filled('categories')) {
    $categoryIds = $this->request->input('categories');
    $query->whereIn('category_id', $categoryIds);
}

This allows you to view all transactions for specific categories.

Category-Based Insights

Transaction counts - See how many transactions use each category
Spending totals - Aggregate amounts by category
Trend analysis - Compare category spending over time

Transactions

Use categories to organize and filter transactions

Dashboard

View spending breakdowns by category

Accounts

Categories work with accounts to track your finances

Get Started

Core Features

Configuration

Development

Deployment

​Overview

Custom Icons

Color Coding

Type-Based

​Category Types

​System Categories

​Creating a Category

​Icon Selection Features

​Color System

​Viewing Categories

​Tabbed Interface

​Category Card Display

​Search Functionality

​Editing Categories

​What You Can Change

​Type Change Behavior

​HTMX-Powered Editing

​Deleting Categories

​Deletion Process

​Icon Management

​Icon Storage

​Icon Search

​Color Customization

​Color Shade

​Available Colors

​Color Application

​Category Usage in Transactions

​Automatic Amount Handling

​Category Filtering

​Best Practices

Create Specific Categories

Limit Category Count

Use Meaningful Icons

Consistent Color Schemes

Review Periodically

Plan Before Creating

​Category Organization Strategies

​Organize by Major Life Categories

​Organize by Essential vs. Discretionary

​Organize by How Often You Pay

​Category Analytics

​Spending by Category Chart

​Transaction Filtering

​Category-Based Insights

​Related Features

Transactions

Dashboard

Accounts

Build docs developers (and LLMs) love

Overview

Category Types

System Categories

Creating a Category

Icon Selection Features

Color System

Viewing Categories

Tabbed Interface

Category Card Display

Search Functionality

Editing Categories

What You Can Change

Type Change Behavior

HTMX-Powered Editing

Deleting Categories

Deletion Process

Icon Management

Icon Storage

Icon Search

Color Customization

Color Shade

Available Colors

Color Application

Category Usage in Transactions

Automatic Amount Handling

Category Filtering

Best Practices

Category Organization Strategies

Organize by Major Life Categories

Organize by Essential vs. Discretionary

Organize by How Often You Pay

Category Analytics

Spending by Category Chart

Transaction Filtering

Category-Based Insights

Related Features