{"kind":"post","path":"/blog/3dtoolbox","post":{"metadata":{"title":"3D Printer Color Management","summary":"A Next.js and Supabase dashboard for tracking filament spools, printers, assignments, presets, photos, and usage.","publishedAt":"2025-12-07","projectDate":"2025-11-29","ascent":"#18D2B3","tags":["3d-printing","inventory","nextjs","supabase","dashboard","webdev","fullstack","appdev"],"weight":0},"slug":"3dtoolbox","content":"\u003c!-- cover: /images/blog/3dtoolbox/cover.png --\u003e\n\n3D Toolbox shows the live link between **spools, printers, materials, and print jobs**. It replaces workshop memory with a fast inventory view.\n\n## Visual Proof\n\n\u003cdiv className=\"bp-evidence-grid\" data-preview-gallery=\"true\"\u003e\n\u003cimg src=\"/images/blog/3dtoolbox/busy-dashboard.png\" alt=\"3D Toolbox busy dashboard screen\" /\u003e\n\u003cimg src=\"/images/blog/3dtoolbox/filaments-grid.png\" alt=\"3D Toolbox filament grid screen\" /\u003e\n\u003cimg src=\"/images/blog/3dtoolbox/filaments-list.png\" alt=\"3D Toolbox filament inventory list\" /\u003e\n\u003cimg src=\"/images/blog/3dtoolbox/printers.png\" alt=\"3D Toolbox printer assignment screen\" /\u003e\n\u003c/div\u003e\n\n\u003cp className=\"bp-evidence-caption\"\u003eInventory, filament, and printer assignment views.\u003c/p\u003e\n\n## Architecture\n\nThe app uses Next.js 16, React 19, TypeScript, Tailwind CSS 4, TanStack Query, and Supabase.\n\n| Layer | Work |\n|---|---|\n| Local mode | Stores printers, filaments, preferences, and timestamps in `localStorage`. |\n| Cloud mode | Adds auth, images, presets, assignments, analytics, and row-level security. |\n| Query layer | Caches reads, prefetches tabs, and loads printer assignments in one bulk query. |\n\n## Workshop Flows\n\n### Grouped Filament\n\nThe list groups equal spools by brand, color, material, diameter, and custom values. It merges counts and removes repeated assignments.\n\n### Printer Slots\n\n`@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.\n\n### Usage\n\nUsage logs can reduce the saved spool weight. Photos, presets, search, and region-specific brand data make each record useful at the workbench."}}