+
+
+
+
{/* Icon Section */}
diff --git a/frontend/src/components/AssignSpoolModal.tsx b/frontend/src/components/AssignSpoolModal.tsx
new file mode 100644
index 000000000..6ec9b0ca2
--- /dev/null
+++ b/frontend/src/components/AssignSpoolModal.tsx
@@ -0,0 +1,231 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { X, Loader2, Package, Check, Search } from 'lucide-react';
+import { api } from '../api/client';
+import type { InventorySpool, SpoolAssignment } from '../api/client';
+import { Button } from './Button';
+import { useToast } from '../contexts/ToastContext';
+
+interface AssignSpoolModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ printerId: number;
+ amsId: number;
+ trayId: number;
+ trayInfo?: {
+ type: string;
+ color: string;
+ location: string;
+ };
+}
+
+export function AssignSpoolModal({ isOpen, onClose, printerId, amsId, trayId, trayInfo }: AssignSpoolModalProps) {
+ const { t } = useTranslation();
+ const queryClient = useQueryClient();
+ const { showToast } = useToast();
+ const [selectedSpoolId, setSelectedSpoolId] = useState(null);
+ const [searchFilter, setSearchFilter] = useState('');
+
+ const { data: spools, isLoading } = useQuery({
+ queryKey: ['inventory-spools'],
+ queryFn: () => api.getSpools(),
+ enabled: isOpen,
+ });
+
+ const { data: assignments } = useQuery({
+ queryKey: ['spool-assignments'],
+ queryFn: () => api.getAssignments(),
+ enabled: isOpen,
+ });
+
+ const assignMutation = useMutation({
+ mutationFn: (spoolId: number) =>
+ api.assignSpool({ spool_id: spoolId, printer_id: printerId, ams_id: amsId, tray_id: trayId }),
+ onSuccess: (newAssignment) => {
+ // Immediately update cache so UI reflects the new assignment without waiting for refetch
+ queryClient.setQueryData(['spool-assignments'], (old) => {
+ const filtered = (old || []).filter(a =>
+ !(a.printer_id === printerId && a.ams_id === amsId && a.tray_id === trayId)
+ );
+ filtered.push(newAssignment);
+ return filtered;
+ });
+ queryClient.invalidateQueries({ queryKey: ['spool-assignments'] });
+ showToast(t('inventory.assignSuccess'), 'success');
+ onClose();
+ },
+ onError: (error: Error) => {
+ showToast(`${t('inventory.assignFailed')}: ${error.message}`, 'error');
+ },
+ });
+
+ if (!isOpen) return null;
+
+ // Filter out Bambu Lab spools (identified by RFID tag_uid or tray_uuid)
+ // and spools already assigned to other slots
+ const assignedSpoolIds = new Set(
+ (assignments || [])
+ .filter(a => !(a.printer_id === printerId && a.ams_id === amsId && a.tray_id === trayId))
+ .map(a => a.spool_id)
+ );
+ const manualSpools = spools?.filter((spool: InventorySpool) =>
+ !spool.tag_uid && !spool.tray_uuid && !assignedSpoolIds.has(spool.id)
+ );
+
+ const filteredSpools = manualSpools?.filter((spool: InventorySpool) => {
+ if (!searchFilter) return true;
+ const q = searchFilter.toLowerCase();
+ return (
+ spool.material.toLowerCase().includes(q) ||
+ (spool.brand?.toLowerCase().includes(q) ?? false) ||
+ (spool.color_name?.toLowerCase().includes(q) ?? false) ||
+ (spool.subtype?.toLowerCase().includes(q) ?? false)
+ );
+ });
+
+ const handleAssign = () => {
+ if (selectedSpoolId) {
+ assignMutation.mutate(selectedSpoolId);
+ }
+ };
+
+ return (
+ ([]);
+ const [loading, setLoading] = useState(true);
+ const [search, setSearch] = useState('');
+ const [filterManufacturer, setFilterManufacturer] = useState('Bambu Lab');
+ const fileInputRef = useRef(null);
+
+ // Add/Edit form state
+ const [showAddForm, setShowAddForm] = useState(false);
+ const [editingId, setEditingId] = useState(null);
+ const [formManufacturer, setFormManufacturer] = useState('');
+ const [formColorName, setFormColorName] = useState('');
+ const [formHexColor, setFormHexColor] = useState('#FFFFFF');
+ const [formMaterial, setFormMaterial] = useState('');
+ const [saving, setSaving] = useState(false);
+
+ // Sync state
+ const [syncing, setSyncing] = useState(false);
+ const [syncProgress, setSyncProgress] = useState<{ fetched: number; total: number } | null>(null);
+
+ // Confirmation modals
+ const [deleteEntry, setDeleteEntry] = useState(null);
+ const [showResetConfirm, setShowResetConfirm] = useState(false);
+
+ const loadCatalog = useCallback(async () => {
+ try {
+ const entries = await api.getColorCatalog();
+ setCatalog(entries);
+ } catch {
+ showToast(t('settings.colorCatalog.loadFailed'), 'error');
+ } finally {
+ setLoading(false);
+ }
+ }, [showToast, t]);
+
+ useEffect(() => {
+ loadCatalog();
+ }, [loadCatalog]);
+
+ const manufacturers = [...new Set(catalog.map(e => e.manufacturer))].sort();
+
+ const filteredCatalog = catalog.filter(entry => {
+ const matchesSearch = search === '' ||
+ entry.manufacturer.toLowerCase().includes(search.toLowerCase()) ||
+ entry.color_name.toLowerCase().includes(search.toLowerCase()) ||
+ (entry.material?.toLowerCase().includes(search.toLowerCase()) ?? false);
+ const matchesManufacturer = filterManufacturer === '' || entry.manufacturer === filterManufacturer;
+ return matchesSearch && matchesManufacturer;
+ });
+
+ const resetForm = () => {
+ setFormManufacturer('');
+ setFormColorName('');
+ setFormHexColor('#FFFFFF');
+ setFormMaterial('');
+ };
+
+ const handleAdd = async () => {
+ if (!formManufacturer.trim() || !formColorName.trim() || !formHexColor) {
+ showToast(t('settings.colorCatalog.fieldsRequired'), 'error');
+ return;
+ }
+ setSaving(true);
+ try {
+ const entry = await api.addColorEntry({
+ manufacturer: formManufacturer.trim(),
+ color_name: formColorName.trim(),
+ hex_color: formHexColor,
+ material: formMaterial.trim() || null,
+ });
+ setCatalog(prev => [...prev, entry].sort((a, b) =>
+ a.manufacturer.localeCompare(b.manufacturer) ||
+ (a.material || '').localeCompare(b.material || '') ||
+ a.color_name.localeCompare(b.color_name)
+ ));
+ setShowAddForm(false);
+ resetForm();
+ showToast(t('settings.colorCatalog.colorAdded'), 'success');
+ } catch {
+ showToast(t('settings.colorCatalog.addFailed'), 'error');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const startEdit = (entry: ColorCatalogEntry) => {
+ setEditingId(entry.id);
+ setFormManufacturer(entry.manufacturer);
+ setFormColorName(entry.color_name);
+ setFormHexColor(entry.hex_color);
+ setFormMaterial(entry.material || '');
+ };
+
+ const cancelEdit = () => {
+ setEditingId(null);
+ resetForm();
+ };
+
+ const handleUpdate = async (id: number) => {
+ if (!formManufacturer.trim() || !formColorName.trim() || !formHexColor) {
+ showToast(t('settings.colorCatalog.fieldsRequired'), 'error');
+ return;
+ }
+ setSaving(true);
+ try {
+ const updated = await api.updateColorEntry(id, {
+ manufacturer: formManufacturer.trim(),
+ color_name: formColorName.trim(),
+ hex_color: formHexColor,
+ material: formMaterial.trim() || null,
+ });
+ setCatalog(prev =>
+ prev.map(e => e.id === id ? updated : e).sort((a, b) =>
+ a.manufacturer.localeCompare(b.manufacturer) ||
+ (a.material || '').localeCompare(b.material || '') ||
+ a.color_name.localeCompare(b.color_name)
+ )
+ );
+ setEditingId(null);
+ resetForm();
+ showToast(t('settings.colorCatalog.colorUpdated'), 'success');
+ } catch {
+ showToast(t('settings.colorCatalog.updateFailed'), 'error');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const handleDelete = async () => {
+ if (!deleteEntry) return;
+ try {
+ await api.deleteColorEntry(deleteEntry.id);
+ setCatalog(prev => prev.filter(e => e.id !== deleteEntry.id));
+ showToast(t('settings.colorCatalog.colorDeleted'), 'success');
+ } catch {
+ showToast(t('settings.colorCatalog.deleteFailed'), 'error');
+ } finally {
+ setDeleteEntry(null);
+ }
+ };
+
+ const handleReset = async () => {
+ setShowResetConfirm(false);
+ setLoading(true);
+ try {
+ await api.resetColorCatalog();
+ await loadCatalog();
+ showToast(t('settings.colorCatalog.resetSuccess'), 'success');
+ } catch {
+ showToast(t('settings.colorCatalog.resetFailed'), 'error');
+ setLoading(false);
+ }
+ };
+
+ const handleSync = async () => {
+ setSyncing(true);
+ setSyncProgress(null);
+ try {
+ const headers: Record = {};
+ const token = getAuthToken();
+ if (token) {
+ headers['Authorization'] = `Bearer ${token}`;
+ }
+ const response = await fetch('/api/v1/inventory/colors/sync', { method: 'POST', headers });
+ if (!response.ok) throw new Error('Failed to start sync');
+
+ const reader = response.body?.getReader();
+ if (!reader) throw new Error('No response body');
+
+ const decoder = new TextDecoder();
+ let buffer = '';
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+
+ buffer += decoder.decode(value, { stream: true });
+ const lines = buffer.split('\n');
+ buffer = lines.pop() || '';
+
+ for (const line of lines) {
+ if (line.startsWith('data: ')) {
+ try {
+ const data = JSON.parse(line.slice(6));
+ if (data.type === 'progress') {
+ setSyncProgress({ fetched: data.total_fetched, total: data.total_available });
+ } else if (data.type === 'complete') {
+ if (data.added === 0) {
+ showToast(t('settings.colorCatalog.syncUpToDate', { count: data.total_fetched }), 'success');
+ } else {
+ showToast(t('settings.colorCatalog.syncComplete', { added: data.added, skipped: data.skipped }), 'success');
+ }
+ } else if (data.type === 'error') {
+ showToast(`${t('settings.colorCatalog.syncError')}: ${data.error}`, 'error');
+ }
+ } catch {
+ // Ignore parse errors
+ }
+ }
+ }
+ }
+ await loadCatalog();
+ } catch {
+ showToast(t('settings.colorCatalog.syncFailed'), 'error');
+ } finally {
+ setSyncing(false);
+ setSyncProgress(null);
+ }
+ };
+
+ const handleExport = () => {
+ const exportData = catalog.map(({ manufacturer, color_name, hex_color, material }) => ({
+ manufacturer, color_name, hex_color, material,
+ }));
+ const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'color-catalog.json';
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ showToast(t('settings.colorCatalog.exported', { count: catalog.length }), 'success');
+ };
+
+ const handleImport = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ try {
+ const text = await file.text();
+ const data = JSON.parse(text) as Array<{
+ manufacturer: string; color_name: string; hex_color: string; material?: string | null;
+ }>;
+ if (!Array.isArray(data)) throw new Error('Invalid format');
+
+ let added = 0;
+ let skipped = 0;
+ for (const item of data) {
+ if (!item.manufacturer || !item.color_name || !item.hex_color) { skipped++; continue; }
+ const exists = catalog.some(c =>
+ c.manufacturer.toLowerCase() === item.manufacturer.toLowerCase() &&
+ c.color_name.toLowerCase() === item.color_name.toLowerCase() &&
+ (c.material || '').toLowerCase() === (item.material || '').toLowerCase()
+ );
+ if (exists) { skipped++; continue; }
+ try {
+ const entry = await api.addColorEntry({
+ manufacturer: item.manufacturer,
+ color_name: item.color_name,
+ hex_color: item.hex_color,
+ material: item.material || null,
+ });
+ setCatalog(prev => [...prev, entry].sort((a, b) =>
+ a.manufacturer.localeCompare(b.manufacturer) ||
+ (a.material || '').localeCompare(b.material || '') ||
+ a.color_name.localeCompare(b.color_name)
+ ));
+ added++;
+ } catch { skipped++; }
+ }
+ showToast(t('settings.colorCatalog.imported', { added, skipped }), 'success');
+ } catch {
+ showToast(t('settings.colorCatalog.importFailed'), 'error');
+ }
+ if (fileInputRef.current) fileInputRef.current.value = '';
+ };
+
+ return (
+
+
+
+
+
+
+ {/* Delete confirmation */}
+ {deleteEntry && (
+ setDeleteEntry(null)}
+ />
+ )}
+
+ {/* Reset confirmation */}
+ {showResetConfirm && (
+ setShowResetConfirm(false)}
+ />
+ )}
+
+ );
+}
diff --git a/frontend/src/components/ColumnConfigModal.tsx b/frontend/src/components/ColumnConfigModal.tsx
new file mode 100644
index 000000000..9d6d3b0df
--- /dev/null
+++ b/frontend/src/components/ColumnConfigModal.tsx
@@ -0,0 +1,187 @@
+import { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GripVertical, Eye, EyeOff, ChevronUp, ChevronDown, RotateCcw } from 'lucide-react';
+import { Card, CardContent } from './Card';
+import { Button } from './Button';
+
+export interface ColumnConfig {
+ id: string;
+ label: string;
+ visible: boolean;
+}
+
+interface ColumnConfigModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ columns: ColumnConfig[];
+ defaultColumns: ColumnConfig[];
+ onSave: (columns: ColumnConfig[]) => void;
+}
+
+export function ColumnConfigModal({ isOpen, onClose, columns, defaultColumns, onSave }: ColumnConfigModalProps) {
+ const { t } = useTranslation();
+ const [localColumns, setLocalColumns] = useState(columns);
+ const [draggedIndex, setDraggedIndex] = useState(null);
+ const draggedIndexRef = useRef(null);
+
+ useEffect(() => {
+ if (isOpen) {
+ setLocalColumns(columns.map((c) => ({ ...c })));
+ }
+ }, [isOpen, columns]);
+
+ useEffect(() => {
+ if (!isOpen) return;
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose();
+ };
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [isOpen, onClose]);
+
+ if (!isOpen) return null;
+
+ const toggleVisibility = (index: number) => {
+ setLocalColumns((prev) =>
+ prev.map((col, i) => (i === index ? { ...col, visible: !col.visible } : col))
+ );
+ };
+
+ const moveColumn = (fromIndex: number, toIndex: number) => {
+ if (toIndex < 0 || toIndex >= localColumns.length) return;
+ setLocalColumns((prev) => {
+ const newColumns = [...prev];
+ const [moved] = newColumns.splice(fromIndex, 1);
+ newColumns.splice(toIndex, 0, moved);
+ return newColumns;
+ });
+ };
+
+ const handleDragStart = (e: React.DragEvent, index: number) => {
+ draggedIndexRef.current = index;
+ setDraggedIndex(index);
+ e.dataTransfer.effectAllowed = 'move';
+ };
+
+ const handleDragOver = (e: React.DragEvent, index: number) => {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'move';
+ const from = draggedIndexRef.current;
+ if (from !== null && from !== index) {
+ moveColumn(from, index);
+ draggedIndexRef.current = index;
+ setDraggedIndex(index);
+ }
+ };
+
+ const handleDrop = (e: React.DragEvent) => {
+ e.preventDefault();
+ };
+
+ const handleDragEnd = () => {
+ draggedIndexRef.current = null;
+ setDraggedIndex(null);
+ };
+
+ const resetToDefaults = () => {
+ setLocalColumns(defaultColumns.map((c) => ({ ...c })));
+ };
+
+ const handleSave = () => {
+ onSave(localColumns);
+ onClose();
+ };
+
+ const visibleCount = localColumns.filter((c) => c.visible).length;
+
+ return (
+ ();
+
+ // 1. Cloud presets
+ if (cloudSettings?.filament) {
+ for (const cp of cloudSettings.filament) {
+ coveredIds.add(cp.setting_id);
+ if (!query || cp.name.toLowerCase().includes(query)) {
+ items.push({ id: cp.setting_id, name: cp.name, source: 'cloud', isUser: isUserPreset(cp.setting_id) });
+ }
+ }
+ }
+
+ // 2. Local presets
if (localPresets?.filament) {
for (const lp of localPresets.filament) {
if (!query || lp.name.toLowerCase().includes(query)) {
@@ -422,35 +454,46 @@ export function ConfigureAmsSlotModal({
}
}
- // Add cloud presets
- if (cloudSettings?.filament) {
- for (const cp of cloudSettings.filament) {
- if (!query || cp.name.toLowerCase().includes(query)) {
- items.push({ id: cp.setting_id, name: cp.name, source: 'cloud', isUser: isUserPreset(cp.setting_id) });
+ // 3. Built-in filament names (fallback — only add entries not already covered)
+ if (builtinFilaments) {
+ for (const bf of builtinFilaments) {
+ if (coveredIds.has(bf.filament_id)) continue;
+ // Convert filament_id to setting_id format for cloud compatibility
+ // e.g. "GFA00" → cloud setting_id would be "GFSA00" (insert S after GF)
+ const settingId = bf.filament_id.startsWith('GF')
+ ? 'GFS' + bf.filament_id.slice(2)
+ : bf.filament_id;
+ if (coveredIds.has(settingId)) continue;
+ if (!query || bf.name.toLowerCase().includes(query)) {
+ items.push({ id: `builtin_${bf.filament_id}`, name: bf.name, source: 'builtin', isUser: false });
}
}
}
- // Sort: local first, then user cloud presets, then built-in, alphabetically within groups
+ // Sort: cloud user presets first, then cloud built-in, then local, then builtin fallback
return items.sort((a, b) => {
- if (a.source === 'local' && b.source !== 'local') return -1;
- if (a.source !== 'local' && b.source === 'local') return 1;
+ const sourceOrder = { cloud: 0, local: 1, builtin: 2 };
+ if (a.source !== b.source) return sourceOrder[a.source] - sourceOrder[b.source];
if (a.isUser && !b.isUser) return -1;
if (!a.isUser && b.isUser) return 1;
return a.name.localeCompare(b.name);
});
- }, [cloudSettings?.filament, localPresets?.filament, searchQuery]);
+ }, [cloudSettings?.filament, localPresets?.filament, builtinFilaments, searchQuery]);
// Get full preset name for K profile filtering (brand + material, without printer suffix)
const selectedPresetInfo = useMemo(() => {
if (!selectedPresetId) return null;
- // Resolve the name from either local or cloud presets
+ // Resolve the name from cloud, local, or builtin presets
let presetName: string | null = null;
if (selectedPresetId.startsWith('local_')) {
const localId = parseInt(selectedPresetId.replace('local_', ''), 10);
const lp = localPresets?.filament.find(p => p.id === localId);
presetName = lp?.name || null;
+ } else if (selectedPresetId.startsWith('builtin_')) {
+ const filamentId = selectedPresetId.replace('builtin_', '');
+ const bf = builtinFilaments?.find(b => b.filament_id === filamentId);
+ presetName = bf?.name || null;
} else if (cloudSettings?.filament) {
const cp = cloudSettings.filament.find(p => p.setting_id === selectedPresetId);
presetName = cp?.name || null;
@@ -470,7 +513,7 @@ export function ConfigureAmsSlotModal({
material: parsed.material,
brand: parsed.brand,
};
- }, [selectedPresetId, cloudSettings?.filament, localPresets?.filament]);
+ }, [selectedPresetId, cloudSettings?.filament, localPresets?.filament, builtinFilaments]);
// For backwards compatibility with the label
const selectedMaterial = selectedPresetInfo?.fullName || '';
@@ -596,7 +639,7 @@ export function ConfigureAmsSlotModal({
if (!isOpen) return null;
- const isLoading = settingsLoading || localLoading || kprofilesLoading;
+ const isLoading = (settingsLoading && !cloudError) || localLoading || builtinLoading || kprofilesLoading;
const canSave = selectedPresetId && !configureMutation.isPending;
// Get display color (custom or slot default)
@@ -703,6 +746,11 @@ export function ConfigureAmsSlotModal({
{t('profiles.localProfiles.badge')}
)}
+ {preset.source === 'builtin' && (
+
+ {t('configureAmsSlot.builtin')}
+
+ )}
{preset.isUser && (
{t('configureAmsSlot.custom')}
diff --git a/frontend/src/components/FilamentHoverCard.tsx b/frontend/src/components/FilamentHoverCard.tsx
index 9b074245a..f1adb160c 100644
--- a/frontend/src/components/FilamentHoverCard.tsx
+++ b/frontend/src/components/FilamentHoverCard.tsx
@@ -1,6 +1,6 @@
import { useState, useRef, useEffect, type ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
-import { Droplets, Link2, Copy, Check, Settings2, ExternalLink } from 'lucide-react';
+import { Droplets, Link2, Copy, Check, Settings2, ExternalLink, Package, Unlink } from 'lucide-react';
interface FilamentData {
vendor: 'Bambu Lab' | 'Generic';
@@ -10,7 +10,7 @@ interface FilamentData {
kFactor: string;
fillLevel: number | null; // null = unknown
trayUuid?: string | null; // Bambu Lab spool UUID for Spoolman linking
- fillSource?: 'ams' | 'spoolman'; // Source of fill level data
+ fillSource?: 'ams' | 'spoolman' | 'inventory'; // Source of fill level data
}
interface SpoolmanConfig {
@@ -21,6 +21,12 @@ interface SpoolmanConfig {
spoolmanUrl?: string | null; // Base URL for Spoolman (for "Open in Spoolman" link)
}
+interface InventoryConfig {
+ onAssignSpool?: () => void;
+ onUnassignSpool?: () => void;
+ assignedSpool?: { id: number; material: string; brand: string | null; color_name: string | null } | null;
+}
+
interface ConfigureSlotConfig {
enabled: boolean;
onConfigure?: () => void;
@@ -32,6 +38,7 @@ interface FilamentHoverCardProps {
disabled?: boolean;
className?: string;
spoolman?: SpoolmanConfig;
+ inventory?: InventoryConfig;
configureSlot?: ConfigureSlotConfig;
}
@@ -39,7 +46,7 @@ interface FilamentHoverCardProps {
* A hover card that displays filament details when hovering over AMS slots.
* Replaces the basic browser tooltip with a styled popover.
*/
-export function FilamentHoverCard({ data, children, disabled, className = '', spoolman, configureSlot }: FilamentHoverCardProps) {
+export function FilamentHoverCard({ data, children, disabled, className = '', spoolman, inventory, configureSlot }: FilamentHoverCardProps) {
const { t } = useTranslation();
const [isVisible, setIsVisible] = useState(false);
const [position, setPosition] = useState<'top' | 'bottom'>('top');
@@ -235,6 +242,9 @@ export function FilamentHoverCard({ data, children, disabled, className = '', sp
{data.fillSource === 'spoolman' && data.fillLevel !== null && (
{t('spoolman.fillSourceLabel')}
)}
+ {data.fillSource === 'inventory' && data.fillLevel !== null && (
+ {t('inventory.fillSourceLabel')}
+ )}
{/* Fill bar */}
@@ -319,6 +329,50 @@ export function FilamentHoverCard({ data, children, disabled, className = '', sp
)}
+ {/* Inventory section - only for non-Bambu spools */}
+ {inventory && data.vendor !== 'Bambu Lab' && (
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/ColorCatalogSettings.tsx b/frontend/src/components/ColorCatalogSettings.tsx
new file mode 100644
index 000000000..710245ec0
--- /dev/null
+++ b/frontend/src/components/ColorCatalogSettings.tsx
@@ -0,0 +1,583 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Palette, Plus, Trash2, RotateCcw, Loader2, Pencil, Check, X, Search, Download, Upload, Cloud } from 'lucide-react';
+import { api, getAuthToken } from '../api/client';
+import type { ColorCatalogEntry } from '../api/client';
+import { useToast } from '../contexts/ToastContext';
+import { Card, CardHeader, CardContent } from './Card';
+import { ConfirmModal } from './ConfirmModal';
+
+export function ColorCatalogSettings() {
+ const { t } = useTranslation();
+ const { showToast } = useToast();
+ const [catalog, setCatalog] = useState
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+
+
+
+ {t('inventory.assignSpool')}
+
+ {/* Tray info */}
+ {trayInfo && (
+
+
+ {/* Footer */}
+
+
+ )}
+
+ {/* Search filter */}
+ {t('inventory.selectSpool')}:
+
+ {trayInfo.color && (
+
+ )}
+ {trayInfo.type || t('ams.emptySlot')}
+ ({trayInfo.location})
+
+
+
+
+ {/* Spool list */}
+
+ {isLoading ? (
+
+
+
+ ) : filteredSpools && filteredSpools.length > 0 ? (
+
+ {filteredSpools.map((spool: InventorySpool) => (
+
+ ))}
+
+ ) : manualSpools && manualSpools.length === 0 ? (
+
+
+ ) : (
+ {t('inventory.noManualSpools')}
+
+
+ )}
+ {t('inventory.noSpoolsMatch')}
+
+
+
+
+
+ {assignMutation.isError && (
+
+ {(assignMutation.error as Error).message}
+
+ )}
+
+
+ {t('settings.colorCatalog.title')}
+ ({catalog.length}) +
+
+
+
+
+
+
+
+ + {t('settings.colorCatalog.description')} +
+ + {/* Search and filter */} +
+
+
+ {/* Add form */}
+ {showAddForm && (
+
+
+
+
+
+ )}
+
+ {/* Filter info */}
+ {(search || filterManufacturer) && (
+ {t('settings.colorCatalog.addNewColor')}
+
+ setFormManufacturer(e.target.value)}
+ />
+ setFormColorName(e.target.value)}
+ />
+
+
+ setFormHexColor(e.target.value)}
+ />
+ setFormHexColor(e.target.value)}
+ />
+
+ setFormMaterial(e.target.value)}
+ />
+
+
+
+
+
+ {t('settings.colorCatalog.showing', { filtered: filteredCatalog.length, total: catalog.length })}
+
+ )}
+
+ {/* Catalog list */}
+ {loading ? (
+
+
+ ) : (
+
+
+
+
+
+ )}
+ | + | {t('settings.colorCatalog.manufacturer')} | +{t('inventory.material')} | +{t('settings.colorCatalog.colorName')} | +{t('settings.colorCatalog.hex')} | ++ | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| + {search || filterManufacturer ? t('settings.colorCatalog.noMatch') : t('settings.colorCatalog.empty')} + | +|||||||||||
| + setFormHexColor(e.target.value)} + /> + | ++ setFormManufacturer(e.target.value)} + /> + | ++ setFormMaterial(e.target.value)} + /> + | ++ setFormColorName(e.target.value)} + /> + | ++ setFormHexColor(e.target.value)} + /> + | +
+
+
+
+
+ |
+
+ ) : (
+ <>
+ + + | +{entry.manufacturer} | +{entry.material || '-'} | +{entry.color_name} | +{entry.hex_color} | +
+
+
+
+
+ |
+
+ )}
+
+ e.stopPropagation()}>
+
+ {/* Header */}
+
+
+
+ );
+}
diff --git a/frontend/src/components/ConfigureAmsSlotModal.tsx b/frontend/src/components/ConfigureAmsSlotModal.tsx
index 7adffa5cf..9cdc7248a 100644
--- a/frontend/src/components/ConfigureAmsSlotModal.tsx
+++ b/frontend/src/components/ConfigureAmsSlotModal.tsx
@@ -226,11 +226,12 @@ export function ConfigureAmsSlotModal({
const [showSuccess, setShowSuccess] = useState(false);
const [showExtendedColors, setShowExtendedColors] = useState(false);
- // Fetch cloud settings
- const { data: cloudSettings, isLoading: settingsLoading } = useQuery({
+ // Fetch cloud settings (gracefully handle 401 when logged out)
+ const { data: cloudSettings, isLoading: settingsLoading, isError: cloudError } = useQuery({
queryKey: ['cloudSettings'],
queryFn: () => api.getCloudSettings(),
enabled: isOpen,
+ retry: false,
});
// Fetch local presets
@@ -240,6 +241,14 @@ export function ConfigureAmsSlotModal({
enabled: isOpen,
});
+ // Fetch built-in filament names (static fallback)
+ const { data: builtinFilaments, isLoading: builtinLoading } = useQuery({
+ queryKey: ['builtinFilaments'],
+ queryFn: () => api.getBuiltinFilaments(),
+ enabled: isOpen,
+ staleTime: Infinity,
+ });
+
// Fetch K profiles
const { data: kprofilesData, isLoading: kprofilesLoading } = useQuery({
queryKey: ['kprofiles', printerId, nozzleDiameter],
@@ -252,23 +261,29 @@ export function ConfigureAmsSlotModal({
mutationFn: async () => {
if (!selectedPresetId) throw new Error('No filament preset selected');
- // Check if this is a local preset
+ // Determine preset source
const isLocal = selectedPresetId.startsWith('local_');
+ const isBuiltin = selectedPresetId.startsWith('builtin_');
const localId = isLocal ? parseInt(selectedPresetId.replace('local_', ''), 10) : null;
+ const builtinFilamentId = isBuiltin ? selectedPresetId.replace('builtin_', '') : null;
const localPreset = isLocal
? localPresets?.filament.find(p => p.id === localId)
: null;
+ const builtinPreset = isBuiltin
+ ? builtinFilaments?.find(b => b.filament_id === builtinFilamentId)
+ : null;
- // Get the selected cloud preset details (null for local presets)
- const selectedPreset = !isLocal
+ // Get the selected cloud preset details (null for local/builtin presets)
+ const selectedPreset = (!isLocal && !isBuiltin)
? cloudSettings?.filament.find(p => p.setting_id === selectedPresetId)
: null;
- if (!isLocal && !selectedPreset) throw new Error('Selected preset not found');
+ if (!isLocal && !isBuiltin && !selectedPreset) throw new Error('Selected preset not found');
if (isLocal && !localPreset) throw new Error('Selected local preset not found');
+ if (isBuiltin && !builtinPreset) throw new Error('Selected builtin preset not found');
// Parse the preset name for filament info
- const presetName = isLocal ? localPreset!.name : selectedPreset!.name;
+ const presetName = isLocal ? localPreset!.name : isBuiltin ? builtinPreset!.name : selectedPreset!.name;
const parsed = parsePresetName(presetName);
// Get cali_idx from selected K profile's slot_id (-1 = use default 0.020)
@@ -287,6 +302,10 @@ export function ConfigureAmsSlotModal({
// Local presets have no Bambu Cloud mapping
trayInfoIdx = '';
settingId = '';
+ } else if (isBuiltin) {
+ // Built-in presets use the filament_id directly as tray_info_idx
+ trayInfoIdx = builtinFilamentId!;
+ settingId = '';
} else {
// Get tray_info_idx: for user presets, fetch detail to get filament_id or derive from base_id
trayInfoIdx = convertToTrayInfoIdx(selectedPresetId);
@@ -312,7 +331,7 @@ export function ConfigureAmsSlotModal({
let tempMin = isLocal && localPreset?.nozzle_temp_min ? localPreset.nozzle_temp_min : 190;
let tempMax = isLocal && localPreset?.nozzle_temp_max ? localPreset.nozzle_temp_max : 230;
- if (!isLocal || (!localPreset?.nozzle_temp_min && !localPreset?.nozzle_temp_max)) {
+ if (!isLocal || isBuiltin || (!localPreset?.nozzle_temp_min && !localPreset?.nozzle_temp_max)) {
// Fall back to material-based defaults
const material = (isLocal ? (localPreset?.filament_type || parsed.material) : parsed.material).toUpperCase();
if (material.includes('PLA')) {
@@ -368,8 +387,8 @@ export function ConfigureAmsSlotModal({
// Save the preset mapping so we can display the correct name in the UI
// This is needed because user presets use filament_id (e.g., P285e239) as tray_info_idx,
// which can't be resolved to a name via the filamentInfo API
- const mappingPresetId = isLocal ? `local_${localId}` : selectedPresetId;
- const mappingSource = isLocal ? 'local' : 'cloud';
+ const mappingPresetId = isLocal ? `local_${localId}` : isBuiltin ? `builtin_${builtinFilamentId}` : selectedPresetId;
+ const mappingSource = isLocal ? 'local' : isBuiltin ? 'builtin' : 'cloud';
try {
await api.saveSlotPreset(printerId, slotInfo.amsId, slotInfo.trayId, mappingPresetId, traySubBrands, mappingSource);
} catch (e) {
@@ -405,15 +424,28 @@ export function ConfigureAmsSlotModal({
},
});
- // Unified preset item for the list (cloud + local)
- type PresetItem = { id: string; name: string; source: 'cloud' | 'local'; isUser: boolean };
+ // Unified preset item for the list (cloud + local + builtin fallback)
+ type PresetItem = { id: string; name: string; source: 'cloud' | 'local' | 'builtin'; isUser: boolean };
- // Filter filament presets based on search (merged cloud + local)
+ // Filter filament presets based on search (merged cloud + local + builtin)
const filteredPresets = useMemo(() => {
const query = searchQuery.toLowerCase();
const items: PresetItem[] = [];
- // Add local presets first
+ // Collect IDs already covered by cloud and local to avoid duplicates in fallback
+ const coveredIds = new Set{t('inventory.configureColumns')}
++ {t('inventory.configureColumnsDesc')} + + ({visibleCount} {t('inventory.of')} {localColumns.length} {t('inventory.visible')}) + +
+ + {/* Column list */} +
+ {localColumns.map((column, index) => (
+
+
+ {/* Footer */}
+ handleDragStart(e, index)}
+ onDragOver={(e) => handleDragOver(e, index)}
+ onDrop={handleDrop}
+ onDragEnd={handleDragEnd}
+ >
+ {/* Drag Handle */}
+
+ ))}
+
+
+
+ {/* Column Name */}
+ {column.label}
+
+ {/* Move Buttons */}
+
+
+
+
+
+ {/* Visibility Toggle */}
+
+
+
+
+
+
+
+ {inventory.assignedSpool ? (
+ <>
+
+ )}
+
{/* Configure slot section - always show if enabled */}
{configureSlot?.enabled && (
+
+ + {inventory.assignedSpool.brand ? `${inventory.assignedSpool.brand} ` : ''} + {inventory.assignedSpool.material} + {inventory.assignedSpool.color_name ? ` - ${inventory.assignedSpool.color_name}` : ''} +
+ {inventory.onUnassignSpool && ( + + )} + + ) : inventory.onAssignSpool ? ( + + ) : null} +
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 477b87355..4ede5f234 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,6 +1,6 @@
import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom';
-import { Printer, Archive, Calendar, BarChart3, Cloud, Settings, Sun, Moon, ChevronLeft, ChevronRight, Keyboard, Github, GripVertical, ArrowUpCircle, Wrench, FolderKanban, FolderOpen, X, Menu, Info, Plug, Bug, LogOut, Key, Loader2, type LucideIcon } from 'lucide-react';
+import { Printer, Archive, Calendar, BarChart3, Cloud, Settings, Sun, Moon, ChevronLeft, ChevronRight, Keyboard, Github, GripVertical, ArrowUpCircle, Wrench, FolderKanban, FolderOpen, X, Menu, Info, Plug, Bug, LogOut, Key, Loader2, Package, type LucideIcon } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useTheme } from '../contexts/ThemeContext';
import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
@@ -29,6 +29,7 @@ export const defaultNavItems: NavItem[] = [
{ id: 'profiles', to: '/profiles', icon: Cloud, labelKey: 'nav.profiles' },
{ id: 'maintenance', to: '/maintenance', icon: Wrench, labelKey: 'nav.maintenance' },
{ id: 'projects', to: '/projects', icon: FolderKanban, labelKey: 'nav.projects' },
+ { id: 'inventory', to: '/inventory', icon: Package, labelKey: 'nav.inventory' },
{ id: 'files', to: '/files', icon: FolderOpen, labelKey: 'nav.files' },
{ id: 'settings', to: '/settings', icon: Settings, labelKey: 'nav.settings' },
];
@@ -118,6 +119,13 @@ export function Layout() {
refetchInterval: 60 * 60 * 1000, // Check every hour
});
+ // Fetch Spoolman settings to determine if inventory should be hidden
+ const { data: spoolmanSettings } = useQuery({
+ queryKey: ['spoolman-settings'],
+ queryFn: api.getSpoolmanSettings,
+ staleTime: 5 * 60 * 1000,
+ });
+
// Fetch external links for sidebar
const { data: externalLinks } = useQuery({
queryKey: ['external-links'],
@@ -189,13 +197,13 @@ export function Layout() {
// Determine if settings should be hidden (user role and auth enabled)
const hideSettings = authEnabled && user?.role === 'user';
+ // Hide inventory when Spoolman mode is active
+ const hideInventory = spoolmanSettings?.spoolman_enabled === 'true';
// Add items in stored order
for (const id of sidebarOrder) {
- // Skip settings if user is not admin
- if (hideSettings && id === 'settings') {
- continue;
- }
+ if (hideSettings && id === 'settings') continue;
+ if (hideInventory && id === 'inventory') continue;
if (navItemsMap.has(id) || extLinksMap.has(id)) {
result.push(id);
seen.add(id);
@@ -204,10 +212,8 @@ export function Layout() {
// Add any new internal nav items not in stored order
for (const item of defaultNavItems) {
- // Skip settings if user is not admin
- if (hideSettings && item.id === 'settings') {
- continue;
- }
+ if (hideSettings && item.id === 'settings') continue;
+ if (hideInventory && item.id === 'inventory') continue;
if (!seen.has(item.id)) {
result.push(item.id);
seen.add(item.id);
@@ -347,9 +353,14 @@ export function Layout() {
e.preventDefault();
if (isExternalLinkId(id)) {
- // External link - navigate to iframe page
- const linkId = id.replace('ext-', '');
- navigate(`/external/${linkId}`);
+ // External link
+ const extLink = extLinksMap.get(id);
+ if (extLink?.open_in_new_tab) {
+ window.open(extLink.url, '_blank', 'noopener,noreferrer');
+ } else {
+ const linkId = id.replace('ext-', '');
+ navigate(`/external/${linkId}`);
+ }
} else {
// Internal nav item
const navItem = navItemsMap.get(id);
@@ -370,7 +381,7 @@ export function Layout() {
break;
}
}
- }, [navigate, orderedSidebarIds, navItemsMap]);
+ }, [navigate, orderedSidebarIds, navItemsMap, extLinksMap]);
useEffect(() => {
document.addEventListener('keydown', handleKeyDown);
@@ -451,31 +462,55 @@ export function Layout() {
: ''
}`}
>
-
- `flex items-center ${isMobile || sidebarExpanded ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition-colors group ${
- isActive
- ? 'bg-bambu-green text-white'
- : 'text-bambu-gray-light hover:bg-bambu-dark-tertiary hover:text-white'
- }`
- }
- title={!isMobile && !sidebarExpanded ? link.name : undefined}
- >
- {sidebarExpanded && !isMobile && (
- 
- ) : (
- LinkIcon &&
+ {link.open_in_new_tab ? (
+
+ {sidebarExpanded && !isMobile && (
+
+ `flex items-center ${isMobile || sidebarExpanded ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition-colors group ${
+ isActive
+ ? 'bg-bambu-green text-white'
+ : 'text-bambu-gray-light hover:bg-bambu-dark-tertiary hover:text-white'
+ }`
+ }
+ title={!isMobile && !sidebarExpanded ? link.name : undefined}
+ >
+ {sidebarExpanded && !isMobile && (
+
+ )}
);
} else {
diff --git a/frontend/src/components/LinkSpoolModal.tsx b/frontend/src/components/LinkSpoolModal.tsx
index 4be13430d..cd5eaa4d9 100644
--- a/frontend/src/components/LinkSpoolModal.tsx
+++ b/frontend/src/components/LinkSpoolModal.tsx
@@ -1,190 +1,154 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
-import { X, Loader2, Link2, Check } from 'lucide-react';
+import { X, Loader2, Search, Link } from 'lucide-react';
import { api } from '../api/client';
+import type { InventorySpool } from '../api/client';
import { Button } from './Button';
import { useToast } from '../contexts/ToastContext';
interface LinkSpoolModalProps {
isOpen: boolean;
onClose: () => void;
+ tagUid: string;
trayUuid: string;
- trayInfo?: {
- type: string;
- color: string;
- location: string;
- };
+ printerId: number;
+ amsId: number;
+ trayId: number;
}
-export function LinkSpoolModal({ isOpen, onClose, trayUuid, trayInfo }: LinkSpoolModalProps) {
+export function LinkSpoolModal({ isOpen, onClose, tagUid, trayUuid, printerId, amsId, trayId }: LinkSpoolModalProps) {
const { t } = useTranslation();
const queryClient = useQueryClient();
const { showToast } = useToast();
- const [selectedSpoolId, setSelectedSpoolId] = useState(null);
+ const [search, setSearch] = useState('');
- // Fetch unlinked spools
- const { data: unlinkedSpools, isLoading } = useQuery({
- queryKey: ['unlinked-spools'],
- queryFn: api.getUnlinkedSpools,
+ const { data: spools, isLoading } = useQuery({
+ queryKey: ['inventory-spools'],
+ queryFn: () => api.getSpools(false),
enabled: isOpen,
});
- // Link mutation
+ // Filter to untagged spools matching search
+ const filteredSpools = useMemo(() => {
+ if (!spools) return [];
+ return spools.filter((s: InventorySpool) => {
+ if (s.tag_uid || s.tray_uuid) return false; // Already tagged
+ if (!search) return true;
+ const q = search.toLowerCase();
+ return (
+ s.material.toLowerCase().includes(q) ||
+ (s.brand && s.brand.toLowerCase().includes(q)) ||
+ (s.color_name && s.color_name.toLowerCase().includes(q))
+ );
+ });
+ }, [spools, search]);
+
const linkMutation = useMutation({
- mutationFn: (spoolId: number) => api.linkSpool(spoolId, trayUuid),
+ mutationFn: (spoolId: number) =>
+ api.linkTagToSpool(spoolId, {
+ tag_uid: tagUid || undefined,
+ tray_uuid: trayUuid || undefined,
+ tag_type: trayUuid ? 'bambulab' : 'generic',
+ data_origin: 'nfc_link',
+ }),
onSuccess: () => {
- queryClient.invalidateQueries({ queryKey: ['unlinked-spools'] });
- queryClient.invalidateQueries({ queryKey: ['linked-spools'] });
- queryClient.invalidateQueries({ queryKey: ['spoolman-status'] });
- showToast(t('spoolman.linkSuccess'), 'success');
+ queryClient.invalidateQueries({ queryKey: ['inventory-spools'] });
+ queryClient.invalidateQueries({ queryKey: ['inventory-assignments'] });
+ showToast(t('inventory.tagLinked'), 'success');
onClose();
},
- onError: (error: Error) => {
- showToast(`${t('spoolman.linkFailed')}: ${error.message}`, 'error');
+ onError: (err: Error) => {
+ showToast(err.message || t('inventory.tagLinkFailed'), 'error');
},
});
if (!isOpen) return null;
- const handleLink = () => {
- if (selectedSpoolId) {
- linkMutation.mutate(selectedSpoolId);
- }
- };
-
return (
- {/* Backdrop */}
-
-
- {/* Modal */}
-
+
+
{/* Header */}
-
-
-
{t('spoolman.linkToSpoolman')}
+
+
- {/* Content */}
-
+
- + + {t('inventory.linkToSpool')} +
++ AMS {amsId} T{trayId} · Printer #{printerId} +
- {/* Tray info */}
- {trayInfo && (
-
-
- )}
-
- {/* Spool UUID */}
- Linking AMS tray:
-
- {trayInfo.color && (
-
- )}
- {trayInfo.type}
- ({trayInfo.location})
-
-
-
);
diff --git a/frontend/src/components/PrinterQueueWidget.tsx b/frontend/src/components/PrinterQueueWidget.tsx
index 687adb8cd..d7b34d240 100644
--- a/frontend/src/components/PrinterQueueWidget.tsx
+++ b/frontend/src/components/PrinterQueueWidget.tsx
@@ -1,11 +1,15 @@
-import { useQuery } from '@tanstack/react-query';
-import { Clock, Calendar, ChevronRight } from 'lucide-react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Clock, Calendar, ChevronRight, Loader2, CircleCheck } from 'lucide-react';
import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
import { api } from '../api/client';
+import { useAuth } from '../contexts/AuthContext';
+import { useToast } from '../contexts/ToastContext';
import { parseUTCDate } from '../utils/date';
interface PrinterQueueWidgetProps {
printerId: number;
+ printerState?: string | null;
}
function formatRelativeTime(dateString: string | null): string {
@@ -22,13 +26,29 @@ function formatRelativeTime(dateString: string | null): string {
return date.toLocaleDateString();
}
-export function PrinterQueueWidget({ printerId }: PrinterQueueWidgetProps) {
+export function PrinterQueueWidget({ printerId, printerState }: PrinterQueueWidgetProps) {
+ const { t } = useTranslation();
+ const queryClient = useQueryClient();
+ const { showToast } = useToast();
+ const { hasPermission } = useAuth();
const { data: queue } = useQuery({
queryKey: ['queue', printerId, 'pending'],
queryFn: () => api.getQueue(printerId, 'pending'),
refetchInterval: 30000,
});
+ const clearPlateMutation = useMutation({
+ mutationFn: () => api.clearPlate(printerId),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['queue', printerId] });
+ queryClient.invalidateQueries({ queryKey: ['printerStatus', printerId] });
+ showToast(t('queue.clearPlateSuccess'), 'success');
+ },
+ onError: (err: Error) => {
+ showToast(err.message, 'error');
+ },
+ });
+
const nextItem = queue?.[0];
const totalPending = queue?.length || 0;
@@ -36,6 +56,48 @@ export function PrinterQueueWidget({ printerId }: PrinterQueueWidgetProps) {
return null;
}
+ const needsClearPlate = printerState === 'FINISH' || printerState === 'FAILED';
+
+ if (needsClearPlate) {
+ return (
+ {t('spoolman.spoolId')}:
-{trayUuid}
+ {/* Search */}
+
+
+ {/* Spool List */}
+
+
-
- {/* Spool list */}
-
-
- {isLoading ? (
- - {t('spoolman.selectSpool')}: + {(tagUid || trayUuid) && ( +
+ Tag: {tagUid || trayUuid}
+ )} +
-
- ) : unlinkedSpools && unlinkedSpools.length > 0 ? (
-
- {unlinkedSpools.map((spool) => (
-
- ))}
-
- ) : (
-
-
- )}
- {t('spoolman.noUnlinkedSpools')}
-
+ {isLoading ? (
+
{/* Footer */}
-
+
+ ) : filteredSpools.length === 0 ? (
+ + {t('inventory.noSpoolsMatch')} +
+ ) : ( + filteredSpools.map((spool: InventorySpool) => ( + + )) + )}
-
-
+
+ );
+ }
+
return (
+
+ {clearPlateMutation.isSuccess ? (
+
+
+ {totalPending > 1 && (
+
+ +{totalPending - 1}
+
+ )}
+ {t('queue.nextInQueue')}
++ {nextItem?.archive_name || `Archive #${nextItem?.archive_id}`} +
+
+
+ ) : (
+
+ )}
+
- ([]);
+ const [loading, setLoading] = useState(true);
+ const [search, setSearch] = useState('');
+ const fileInputRef = useRef(null);
+
+ // Add/Edit form state
+ const [showAddForm, setShowAddForm] = useState(false);
+ const [editingId, setEditingId] = useState(null);
+ const [formName, setFormName] = useState('');
+ const [formWeight, setFormWeight] = useState('');
+ const [saving, setSaving] = useState(false);
+
+ // Confirmation modals
+ const [deleteEntry, setDeleteEntry] = useState(null);
+ const [showResetConfirm, setShowResetConfirm] = useState(false);
+
+ const loadCatalog = useCallback(async () => {
+ try {
+ const entries = await api.getSpoolCatalog();
+ setCatalog(entries);
+ } catch {
+ showToast(t('settings.catalog.loadFailed'), 'error');
+ } finally {
+ setLoading(false);
+ }
+ }, [showToast, t]);
+
+ useEffect(() => {
+ loadCatalog();
+ }, [loadCatalog]);
+
+ const filteredCatalog = catalog.filter(entry =>
+ entry.name.toLowerCase().includes(search.toLowerCase())
+ );
+
+ const handleAdd = async () => {
+ if (!formName.trim() || !formWeight) {
+ showToast(t('settings.catalog.nameWeightRequired'), 'error');
+ return;
+ }
+ setSaving(true);
+ try {
+ const entry = await api.addCatalogEntry({ name: formName.trim(), weight: parseInt(formWeight) });
+ setCatalog(prev => [...prev, entry].sort((a, b) => a.name.localeCompare(b.name)));
+ setShowAddForm(false);
+ setFormName('');
+ setFormWeight('');
+ showToast(t('settings.catalog.entryAdded'), 'success');
+ } catch {
+ showToast(t('settings.catalog.addFailed'), 'error');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const startEdit = (entry: SpoolCatalogEntry) => {
+ setEditingId(entry.id);
+ setFormName(entry.name);
+ setFormWeight(entry.weight.toString());
+ };
+
+ const cancelEdit = () => {
+ setEditingId(null);
+ setFormName('');
+ setFormWeight('');
+ };
+
+ const handleUpdate = async (id: number) => {
+ if (!formName.trim() || !formWeight) {
+ showToast(t('settings.catalog.nameWeightRequired'), 'error');
+ return;
+ }
+ setSaving(true);
+ try {
+ const updated = await api.updateCatalogEntry(id, { name: formName.trim(), weight: parseInt(formWeight) });
+ setCatalog(prev => prev.map(e => e.id === id ? updated : e).sort((a, b) => a.name.localeCompare(b.name)));
+ setEditingId(null);
+ setFormName('');
+ setFormWeight('');
+ showToast(t('settings.catalog.entryUpdated'), 'success');
+ } catch {
+ showToast(t('settings.catalog.updateFailed'), 'error');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const handleDelete = async () => {
+ if (!deleteEntry) return;
+ try {
+ await api.deleteCatalogEntry(deleteEntry.id);
+ setCatalog(prev => prev.filter(e => e.id !== deleteEntry.id));
+ showToast(t('settings.catalog.entryDeleted'), 'success');
+ } catch {
+ showToast(t('settings.catalog.deleteFailed'), 'error');
+ } finally {
+ setDeleteEntry(null);
+ }
+ };
+
+ const handleReset = async () => {
+ setShowResetConfirm(false);
+ setLoading(true);
+ try {
+ await api.resetSpoolCatalog();
+ await loadCatalog();
+ showToast(t('settings.catalog.resetSuccess'), 'success');
+ } catch {
+ showToast(t('settings.catalog.resetFailed'), 'error');
+ setLoading(false);
+ }
+ };
+
+ const handleExport = () => {
+ const exportData = catalog.map(({ name, weight }) => ({ name, weight }));
+ const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'spool-catalog.json';
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ showToast(t('settings.catalog.exported', { count: catalog.length }), 'success');
+ };
+
+ const handleImport = async (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ try {
+ const text = await file.text();
+ const data = JSON.parse(text) as Array<{ name: string; weight: number }>;
+ if (!Array.isArray(data)) throw new Error('Invalid format');
+
+ let added = 0;
+ let skipped = 0;
+ for (const item of data) {
+ if (!item.name || typeof item.weight !== 'number') { skipped++; continue; }
+ const exists = catalog.some(c => c.name.toLowerCase() === item.name.toLowerCase());
+ if (exists) { skipped++; continue; }
+ try {
+ const entry = await api.addCatalogEntry({ name: item.name, weight: item.weight });
+ setCatalog(prev => [...prev, entry].sort((a, b) => a.name.localeCompare(b.name)));
+ added++;
+ } catch { skipped++; }
+ }
+ showToast(t('settings.catalog.imported', { added, skipped }), 'success');
+ } catch {
+ showToast(t('settings.catalog.importFailed'), 'error');
+ }
+ if (fileInputRef.current) fileInputRef.current.value = '';
+ };
+
+ return (
+
+
+
+
+
+
+ {/* Delete confirmation */}
+ {deleteEntry && (
+ setDeleteEntry(null)}
+ />
+ )}
+
+ {/* Reset confirmation */}
+ {showResetConfirm && (
+ setShowResetConfirm(false)}
+ />
+ )}
+
+ );
+}
diff --git a/frontend/src/components/SpoolFormModal.tsx b/frontend/src/components/SpoolFormModal.tsx
new file mode 100644
index 000000000..b2d5b9710
--- /dev/null
+++ b/frontend/src/components/SpoolFormModal.tsx
@@ -0,0 +1,504 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { X, Loader2, Save, Beaker, Palette } from 'lucide-react';
+import { api } from '../api/client';
+import type { InventorySpool, SlicerSetting, SpoolCatalogEntry, LocalPreset } from '../api/client';
+import { Button } from './Button';
+import { useToast } from '../contexts/ToastContext';
+import type { SpoolFormData, PrinterWithCalibrations, ColorPreset } from './spool-form/types';
+import { defaultFormData, validateForm } from './spool-form/types';
+import { buildFilamentOptions, extractBrandsFromPresets, findPresetOption, loadRecentColors, saveRecentColor } from './spool-form/utils';
+import { FilamentSection } from './spool-form/FilamentSection';
+import { ColorSection } from './spool-form/ColorSection';
+import { AdditionalSection } from './spool-form/AdditionalSection';
+import { PAProfileSection } from './spool-form/PAProfileSection';
+import { SpoolUsageHistory } from './SpoolUsageHistory';
+
+type TabId = 'filament' | 'pa-profile';
+
+interface SpoolFormModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ spool?: InventorySpool | null;
+ printersWithCalibrations?: PrinterWithCalibrations[];
+}
+
+export function SpoolFormModal({ isOpen, onClose, spool, printersWithCalibrations = [] }: SpoolFormModalProps) {
+ const { t } = useTranslation();
+ const queryClient = useQueryClient();
+ const { showToast } = useToast();
+
+ const isEditing = !!spool;
+
+ // Form state
+ const [formData, setFormData] = useState(defaultFormData);
+ const [errors, setErrors] = useState>>({});
+ const [activeTab, setActiveTab] = useState('filament');
+
+ // Cloud presets
+ const [cloudAuthenticated, setCloudAuthenticated] = useState(false);
+ const [loadingCloudPresets, setLoadingCloudPresets] = useState(false);
+ const [cloudPresets, setCloudPresets] = useState([]);
+ const [presetInputValue, setPresetInputValue] = useState('');
+
+ // Spool catalog
+ const [spoolCatalog, setSpoolCatalog] = useState([]);
+
+ // Local presets (OrcaSlicer imports)
+ const [localPresets, setLocalPresets] = useState([]);
+
+ // Color catalog
+ const [colorCatalog, setColorCatalog] = useState<{ manufacturer: string; color_name: string; hex_color: string; material: string | null }[]>([]);
+
+ // Color state
+ const [recentColors, setRecentColors] = useState([]);
+
+ // PA Profile state
+ const [fetchedCalibrations, setFetchedCalibrations] = useState([]);
+ const [selectedProfiles, setSelectedProfiles] = useState>(new Set());
+ const [expandedPrinters, setExpandedPrinters] = useState>(new Set());
+
+ // Use prop if provided, otherwise use self-fetched data
+ const resolvedCalibrations = printersWithCalibrations.length > 0
+ ? printersWithCalibrations
+ : fetchedCalibrations;
+
+ // Count selected PA profiles for tab badge
+ const selectedProfileCount = useMemo(() => {
+ return selectedProfiles.size;
+ }, [selectedProfiles]);
+
+ // Load recent colors on mount
+ useEffect(() => {
+ setRecentColors(loadRecentColors());
+ }, []);
+
+ // Fetch cloud presets and catalog when modal opens
+ useEffect(() => {
+ if (isOpen) {
+ const fetchData = async () => {
+ setLoadingCloudPresets(true);
+ try {
+ const status = await api.getCloudStatus();
+ setCloudAuthenticated(status.is_authenticated);
+ if (status.is_authenticated) {
+ const presets = await api.getFilamentPresets();
+ setCloudPresets(presets);
+ }
+ } catch (e) {
+ console.error('Failed to fetch cloud presets:', e);
+ setCloudAuthenticated(false);
+ } finally {
+ setLoadingCloudPresets(false);
+ }
+ };
+ fetchData();
+ api.getSpoolCatalog().then(setSpoolCatalog).catch(console.error);
+ api.getColorCatalog().then(setColorCatalog).catch(console.error);
+ api.getLocalPresets().then(r => setLocalPresets(r.filament)).catch(console.error);
+
+ // Fetch printer calibrations if not provided via props
+ if (printersWithCalibrations.length === 0) {
+ (async () => {
+ try {
+ const printers = await api.getPrinters();
+ const statuses = await Promise.all(
+ printers.map(p => api.getPrinterStatus(p.id).catch(() => null)),
+ );
+ const results: PrinterWithCalibrations[] = [];
+ for (let i = 0; i < printers.length; i++) {
+ const printer = printers[i];
+ const status = statuses[i];
+ const connected = status?.connected ?? false;
+ let calibrations: PrinterWithCalibrations['calibrations'] = [];
+ if (connected) {
+ try {
+ const kRes = await api.getKProfiles(printer.id);
+ calibrations = kRes.profiles.map(p => ({
+ cali_idx: p.slot_id,
+ filament_id: p.filament_id,
+ setting_id: p.setting_id || '',
+ name: p.name,
+ k_value: parseFloat(p.k_value) || 0,
+ n_coef: parseFloat(p.n_coef) || 0,
+ extruder_id: p.extruder_id,
+ nozzle_diameter: p.nozzle_diameter,
+ }));
+ } catch {
+ // Printer may not support K-profiles
+ }
+ }
+ results.push({ printer: { ...printer, connected }, calibrations });
+ }
+ setFetchedCalibrations(results);
+ } catch (e) {
+ console.error('Failed to fetch printer calibrations:', e);
+ }
+ })();
+ }
+ }
+ }, [isOpen, printersWithCalibrations.length]);
+
+ // Build filament options: cloud → local → fallback
+ const filamentOptions = useMemo(
+ () => buildFilamentOptions(cloudPresets, new Set(), localPresets),
+ [cloudPresets, localPresets],
+ );
+
+ // Extract brands from presets
+ const availableBrands = useMemo(
+ () => extractBrandsFromPresets(cloudPresets, localPresets),
+ [cloudPresets, localPresets],
+ );
+
+ // Find selected preset option
+ const selectedPresetOption = useMemo(
+ () => findPresetOption(formData.slicer_filament, filamentOptions),
+ [formData.slicer_filament, filamentOptions],
+ );
+
+ // Reset form when modal opens/closes or spool changes
+ useEffect(() => {
+ if (isOpen) {
+ if (spool) {
+ setFormData({
+ material: spool.material || '',
+ subtype: spool.subtype || '',
+ brand: spool.brand || '',
+ color_name: spool.color_name || '',
+ rgba: spool.rgba || '808080FF',
+ label_weight: spool.label_weight || 1000,
+ core_weight: spool.core_weight || 250,
+ weight_used: spool.weight_used || 0,
+ slicer_filament: spool.slicer_filament || '',
+ note: spool.note || '',
+ });
+ setPresetInputValue(spool.slicer_filament_name || spool.slicer_filament || '');
+
+ // Load K-profiles for this spool
+ if (spool.k_profiles && spool.k_profiles.length > 0) {
+ const profileKeys = new Set();
+ for (const p of spool.k_profiles) {
+ if (p.cali_idx !== null && p.cali_idx !== undefined) {
+ profileKeys.add(`${p.printer_id}:${p.cali_idx}:${p.extruder ?? 'null'}`);
+ }
+ }
+ setSelectedProfiles(profileKeys);
+ } else {
+ setSelectedProfiles(new Set());
+ }
+ } else {
+ setFormData(defaultFormData);
+ setPresetInputValue('');
+ setSelectedProfiles(new Set());
+ }
+ setErrors({});
+ setActiveTab('filament');
+ }
+ }, [isOpen, spool]);
+
+ // Expand all printers in PA profile section when calibrations are available
+ useEffect(() => {
+ if (isOpen && resolvedCalibrations.length > 0) {
+ setExpandedPrinters(new Set(resolvedCalibrations.map(p => String(p.printer.id))));
+ }
+ }, [isOpen, resolvedCalibrations]);
+
+ // Update field helper
+ const updateField = (key: K, value: SpoolFormData[K]) => {
+ setFormData(prev => ({ ...prev, [key]: value }));
+ if (errors[key]) {
+ setErrors(prev => ({ ...prev, [key]: undefined }));
+ }
+ };
+
+ // Handle color selection
+ const handleColorUsed = (color: ColorPreset) => {
+ setRecentColors(prev => saveRecentColor(color, prev));
+ };
+
+ // Mutations
+ const createMutation = useMutation({
+ mutationFn: (data: Record) =>
+ api.createSpool(data as Parameters[0]),
+ onSuccess: async (newSpool) => {
+ // Save K-profiles if any selected
+ if (selectedProfiles.size > 0 && newSpool?.id) {
+ await saveKProfiles(newSpool.id);
+ }
+ await queryClient.invalidateQueries({ queryKey: ['inventory-spools'] });
+ showToast(t('inventory.spoolCreated'), 'success');
+ onClose();
+ },
+ onError: (error: Error) => {
+ showToast(error.message, 'error');
+ },
+ });
+
+ const updateMutation = useMutation({
+ mutationFn: (data: Record) =>
+ api.updateSpool(spool!.id, data as Parameters[1]),
+ onSuccess: async () => {
+ // Save K-profiles
+ if (spool?.id) {
+ await saveKProfiles(spool.id);
+ }
+ await queryClient.invalidateQueries({ queryKey: ['inventory-spools'] });
+ showToast(t('inventory.spoolUpdated'), 'success');
+ onClose();
+ },
+ onError: (error: Error) => {
+ showToast(error.message, 'error');
+ },
+ });
+
+ // Save K-profiles for selected calibrations
+ const saveKProfiles = async (spoolId: number) => {
+ if (selectedProfiles.size === 0) {
+ // Clear existing K-profiles
+ try {
+ await api.saveSpoolKProfiles(spoolId, []);
+ } catch {
+ // Ignore
+ }
+ return;
+ }
+
+ const profiles = [];
+ for (const key of selectedProfiles) {
+ const [printerIdStr, caliIdxStr, extruderStr] = key.split(':');
+ const printerId = parseInt(printerIdStr);
+ const caliIdx = parseInt(caliIdxStr);
+ const extruder = extruderStr === 'null' ? 0 : parseInt(extruderStr);
+
+ // Find the matching calibration
+ const pc = resolvedCalibrations.find(p => p.printer.id === printerId);
+ if (pc) {
+ const cal = pc.calibrations.find(c => c.cali_idx === caliIdx);
+ if (cal) {
+ profiles.push({
+ printer_id: printerId,
+ extruder,
+ nozzle_diameter: cal.nozzle_diameter || '0.4',
+ k_value: cal.k_value,
+ name: cal.name || null,
+ cali_idx: cal.cali_idx,
+ setting_id: cal.setting_id || null,
+ });
+ }
+ }
+ }
+
+ if (profiles.length > 0) {
+ try {
+ await api.saveSpoolKProfiles(spoolId, profiles);
+ } catch (e) {
+ console.error('Failed to save K-profiles:', e);
+ }
+ }
+ };
+
+ // Close on Escape key
+ useEffect(() => {
+ if (!isOpen) return;
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose();
+ };
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [isOpen, onClose]);
+
+ if (!isOpen) return null;
+
+ const handleSubmit = () => {
+ const validation = validateForm(formData);
+ if (!validation.isValid) {
+ setErrors(validation.errors);
+ // Switch to filament tab if there are errors there
+ if (validation.errors.slicer_filament || validation.errors.material) {
+ setActiveTab('filament');
+ }
+ return;
+ }
+
+ // Find preset name from selected option
+ const presetName = selectedPresetOption?.displayName || presetInputValue || null;
+
+ const data: Record = {
+ material: formData.material,
+ subtype: formData.subtype || null,
+ brand: formData.brand || null,
+ color_name: formData.color_name || null,
+ rgba: formData.rgba || null,
+ label_weight: formData.label_weight,
+ core_weight: formData.core_weight,
+ weight_used: formData.weight_used,
+ slicer_filament: formData.slicer_filament || null,
+ slicer_filament_name: presetName,
+ nozzle_temp_min: null,
+ nozzle_temp_max: null,
+ note: formData.note || null,
+ };
+
+ if (isEditing) {
+ updateMutation.mutate(data);
+ } else {
+ createMutation.mutate(data);
+ }
+ };
+
+ const isPending = createMutation.isPending || updateMutation.isPending;
+
+ return (
+ = {
+ completed: 'text-bambu-green',
+ failed: 'text-red-400',
+ aborted: 'text-yellow-400',
+};
+
+export function SpoolUsageHistory({ spoolId }: SpoolUsageHistoryProps) {
+ const { t } = useTranslation();
+ const queryClient = useQueryClient();
+ const { showToast } = useToast();
+
+ const { data: history, isLoading } = useQuery({
+ queryKey: ['spool-usage', spoolId],
+ queryFn: () => api.getSpoolUsageHistory(spoolId),
+ });
+
+ const clearMutation = useMutation({
+ mutationFn: () => api.clearSpoolUsageHistory(spoolId),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['spool-usage', spoolId] });
+ showToast(t('inventory.historyCleared'), 'success');
+ },
+ });
+
+ if (isLoading) {
+ return (
+
@@ -164,7 +164,7 @@ export function SpoolmanSettings() {
Next in queue
+{t('queue.nextInQueue')}
{nextItem?.archive_name || `Archive #${nextItem?.archive_id}`}
diff --git a/frontend/src/components/SpoolCatalogSettings.tsx b/frontend/src/components/SpoolCatalogSettings.tsx new file mode 100644 index 000000000..9cecee779 --- /dev/null +++ b/frontend/src/components/SpoolCatalogSettings.tsx @@ -0,0 +1,397 @@ +import { useState, useEffect, useCallback, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Database, Plus, Trash2, RotateCcw, Loader2, Pencil, Check, X, Search, Download, Upload } from 'lucide-react'; +import { api } from '../api/client'; +import type { SpoolCatalogEntry } from '../api/client'; +import { useToast } from '../contexts/ToastContext'; +import { Card, CardHeader, CardContent } from './Card'; +import { ConfirmModal } from './ConfirmModal'; + +export function SpoolCatalogSettings() { + const { t } = useTranslation(); + const { showToast } = useToast(); + const [catalog, setCatalog] = useState
+
+ {t('settings.catalog.spoolCatalog')}
+ ({catalog.length}) +
+
+
+
+
+
+
+ + {t('settings.catalog.spoolCatalogDescription')} +
+ + {/* Search */} +
+
+
+ {/* Add form */}
+ {showAddForm && (
+
+
+ )}
+
+ {/* Catalog list */}
+ {loading ? (
+ {t('settings.catalog.addNewEntry')}
+
+
+
+ setFormName(e.target.value)}
+ />
+
+ setFormWeight(e.target.value)}
+ />
+ g
+
+
+
+
+ ) : (
+
+
+
+
+
+ )}
+ | {t('common.name')} | +{t('settings.catalog.weight')} | +{t('settings.catalog.type')} | ++ | ||||
|---|---|---|---|---|---|---|---|
| + {search ? t('settings.catalog.noMatch') : t('settings.catalog.empty')} + | +|||||||
| + setFormName(e.target.value)} + /> + | ++ setFormWeight(e.target.value)} + /> + | ++ - + | +
+
+
+
+
+ |
+
+ ) : (
+ <>
+ {entry.name} | +{entry.weight}g | ++ {entry.is_default ? ( + + {t('settings.catalog.default')} + + ) : ( + + {t('settings.catalog.custom')} + + )} + | +
+
+
+
+
+ |
+
+ )}
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/SpoolUsageHistory.tsx b/frontend/src/components/SpoolUsageHistory.tsx
new file mode 100644
index 000000000..594338538
--- /dev/null
+++ b/frontend/src/components/SpoolUsageHistory.tsx
@@ -0,0 +1,101 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Loader2, Trash2, Clock } from 'lucide-react';
+import { api } from '../api/client';
+import type { SpoolUsageRecord } from '../api/client';
+import { Button } from './Button';
+import { useToast } from '../contexts/ToastContext';
+
+interface SpoolUsageHistoryProps {
+ spoolId: number;
+}
+
+function formatDate(dateStr: string): string {
+ const date = new Date(dateStr);
+ return date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: '2-digit' }) +
+ ' ' + date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
+}
+
+const STATUS_COLORS: Record
+ {/* Header */}
+
+
+
+
+ {/* Tabs */}
+ + {isEditing ? t('inventory.editSpool') : t('inventory.addSpool')} +
+ +
+
+
+
+
+ {/* Content */}
+
+ {activeTab === 'filament' ? (
+
+
+ {/* Footer */}
+
+ {/* Filament Info Section */}
+
+ ) : (
+
+
+
+ {/* Color Section */}
+ + {t('inventory.filamentInfo')} +
+{errors.slicer_filament}
+ )} + {errors.material && ( +{errors.material}
+ )} +
+
+
+ {/* Additional Section */}
+ + {t('inventory.color')} +
+
+
+
+ {/* Usage History (only when editing) */}
+ {isEditing && spool && (
+ + {t('inventory.additional')} +
+
+
+ )}
+
+
+
+
+
+
+ );
+ }
+
+ if (!history || history.length === 0) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/frontend/src/components/SpoolmanSettings.tsx b/frontend/src/components/SpoolmanSettings.tsx
index c6a7748d1..6a77f9074 100644
--- a/frontend/src/components/SpoolmanSettings.tsx
+++ b/frontend/src/components/SpoolmanSettings.tsx
@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Loader2, Check, X, RefreshCw, Link2, Link2Off, Database, ChevronDown, Info, AlertTriangle } from 'lucide-react';
+import { Loader2, Check, X, RefreshCw, Link2, Link2Off, Database, ChevronDown, Info, AlertTriangle, Package, ExternalLink } from 'lucide-react';
import { api } from '../api/client';
import type { SpoolmanSyncResult, Printer } from '../api/client';
import { Card, CardContent, CardHeader } from './Card';
@@ -146,7 +146,7 @@ export function SpoolmanSettings() {
+
+ {t('inventory.usageHistory')}
+ +
+ {history.map((record: SpoolUsageRecord) => (
+
+
+
+ ))}
+
+ {formatDate(record.created_at)}
+ {record.print_name && (
+
+ {record.print_name}
+
+ )}
+
+
+ {record.weight_used.toFixed(1)}g
+ ({record.percent_used}%)
+
+ {record.status}
+
+
+ Spoolman Integration
+{t('settings.filamentTracking')}
Spoolman Integration
+{t('settings.filamentTracking')}
- Connect to Spoolman for filament inventory tracking. AMS data will sync automatically. + {t('settings.filamentTrackingDesc')}
- {/* Info banner about sync requirements */} -
-
-
- {/* Enable toggle */}
-
-
-
-
- How Sync Works
--
-
- Only official Bambu Lab spools with RFID are synced -
- New spools are auto-created in Spoolman on first sync -
- Non-Bambu Lab spools (third-party, refilled) are skipped -
Linking Existing Spools
-- To link existing Spoolman spools to your AMS, hover over an AMS slot and click "Link to Spoolman". -
-
-
-
- {/* URL input */}
-
-
-
- Enable Spoolman
-- Sync filament data with Spoolman server -
-
-
- setLocalUrl(e.target.value)}
- disabled={!localEnabled}
- className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white placeholder-bambu-gray/50 focus:border-bambu-green focus:outline-none disabled:opacity-50"
- />
-
-
- {/* Sync mode */}
- - URL of your Spoolman server (e.g., http://localhost:7912) -
-
-
-