# 3D Printer Color Management

> A Next.js and Supabase dashboard for tracking filament spools, printers, assignments, presets, photos, and usage.

- URL: https://mandalsuraj.com/blog/3dtoolbox
- Author: Suraj Mandal (https://mandalsuraj.com)
- Published: 2025-12-07
- Project date: 2025-11-29
- Tags: 3d-printing, inventory, nextjs, supabase, dashboard, webdev, fullstack, appdev

![3D Printer Color Management cover](https://mandalsuraj.com/images/blog/3dtoolbox/cover.png)

3D Toolbox shows the live link between **spools, printers, materials, and print jobs**. It replaces workshop memory with a fast inventory view.

## Visual Proof

![3D Toolbox busy dashboard screen](https://mandalsuraj.com/images/blog/3dtoolbox/busy-dashboard.png)

![3D Toolbox filament grid screen](https://mandalsuraj.com/images/blog/3dtoolbox/filaments-grid.png)

![3D Toolbox filament inventory list](https://mandalsuraj.com/images/blog/3dtoolbox/filaments-list.png)

![3D Toolbox printer assignment screen](https://mandalsuraj.com/images/blog/3dtoolbox/printers.png)

Inventory, filament, and printer assignment views.

## Architecture

The app uses Next.js 16, React 19, TypeScript, Tailwind CSS 4, TanStack Query, and Supabase.

| Layer | Work |
|---|---|
| Local mode | Stores printers, filaments, preferences, and timestamps in `localStorage`. |
| Cloud mode | Adds auth, images, presets, assignments, analytics, and row-level security. |
| Query layer | Caches reads, prefetches tabs, and loads printer assignments in one bulk query. |

## Workshop Flows

### Grouped Filament

The list groups equal spools by brand, color, material, diameter, and custom values. It merges counts and removes repeated assignments.

### Printer Slots

`@dnd-kit/core` links a spool to a printer slot with drag and drop. The active slot gets a clear focus ring and scale change.

### Usage

Usage logs can reduce the saved spool weight. Photos, presets, search, and region-specific brand data make each record useful at the workbench.