mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-02 20:22:15 +02:00
maziggy
1d344a8536
The app was built dark-first, so hundreds of hardcoded Tailwind semantic text/icon utilities at light shades (text-amber-400, text-blue-300, ...) had no dark: variant. With darkMode:'class' they applied in light theme too, producing washed-out text on pale tints and white cards — including the three reported spots (AMS Drying banner, Archives no-3MF warning, debug-logging banner). Give each a theme-aware pair: a darker readable shade in light theme with the original pinned to dark:, so dark theme is unchanged. ~100 files. The bambu-* CSS-variable palette (self-correcting) and the dark-only SpoolBuddy kiosk are left untouched. Plain text-white is already theme-aware via the existing index.css .text-white override, so it needed no changes.
243 lines
12 KiB
TypeScript
243 lines
12 KiB
TypeScript
import { useState, useRef, type DragEvent } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Upload, X, FileText, Loader2, CheckCircle, XCircle, MinusCircle, Wand2, AlertTriangle, Copy } from 'lucide-react';
|
|
import { api, type CsvImportPreview, type CsvImportRow } from '../api/client';
|
|
import { getSwatchStyle } from '../utils/colors';
|
|
import { Button } from './Button';
|
|
|
|
interface SpoolCsvImportModalProps {
|
|
onClose: () => void;
|
|
/** Called after a successful import so the page can refetch the inventory. */
|
|
onImported: (created: number) => void;
|
|
}
|
|
|
|
/**
|
|
* CSV import flow (#1576): pick a file → backend dry-run preview (per-row
|
|
* valid/error/skipped, colours resolved) → user reviews → confirm imports only
|
|
* the valid rows. Nothing is written until confirm.
|
|
*/
|
|
export function SpoolCsvImportModal({ onClose, onImported }: SpoolCsvImportModalProps) {
|
|
const { t } = useTranslation();
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [preview, setPreview] = useState<CsvImportPreview | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [importing, setImporting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const loadPreview = async (selected: File) => {
|
|
setFile(selected);
|
|
setPreview(null);
|
|
setError(null);
|
|
setLoading(true);
|
|
try {
|
|
const result = await api.importSpoolsCsvPreview(selected);
|
|
setPreview(result);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : t('inventory.csv.previewError', 'Could not read the CSV file'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const selected = e.target.files?.[0];
|
|
if (selected) loadPreview(selected);
|
|
};
|
|
|
|
const handleDrop = (e: DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
setIsDragging(false);
|
|
const dropped = e.dataTransfer.files?.[0];
|
|
if (dropped) loadPreview(dropped);
|
|
};
|
|
|
|
const handleImport = async () => {
|
|
if (!file) return;
|
|
setImporting(true);
|
|
setError(null);
|
|
try {
|
|
const result = await api.importSpoolsCsv(file);
|
|
onImported(result.created);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : t('inventory.csv.importError', 'Import failed'));
|
|
setImporting(false);
|
|
}
|
|
};
|
|
|
|
const statusIcon = (status: CsvImportRow['status']) => {
|
|
if (status === 'valid') return <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />;
|
|
if (status === 'error') return <XCircle className="w-4 h-4 text-red-500 flex-shrink-0" />;
|
|
return <MinusCircle className="w-4 h-4 text-bambu-gray flex-shrink-0" />;
|
|
};
|
|
|
|
const validCount = preview?.valid_count ?? 0;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-bambu-dark-secondary rounded-lg w-full max-w-3xl border border-bambu-dark-tertiary flex flex-col max-h-[90vh]">
|
|
<div className="p-4 border-b border-bambu-dark-tertiary flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold text-white">{t('inventory.csv.modalTitle', 'Import spools from CSV')}</h2>
|
|
<button onClick={onClose} className="p-1 hover:bg-bambu-dark rounded">
|
|
<X className="w-5 h-5 text-bambu-gray" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-4 overflow-y-auto flex-1">
|
|
{/* Drop zone / file picker */}
|
|
<div
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
setIsDragging(true);
|
|
}}
|
|
onDragLeave={(e) => {
|
|
e.preventDefault();
|
|
setIsDragging(false);
|
|
}}
|
|
onDrop={handleDrop}
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
|
|
isDragging
|
|
? 'border-bambu-green bg-bambu-green/10'
|
|
: 'border-bambu-dark-tertiary hover:border-bambu-green/50'
|
|
}`}
|
|
>
|
|
<Upload className={`w-9 h-9 mx-auto mb-2 ${isDragging ? 'text-bambu-green' : 'text-bambu-gray'}`} />
|
|
{file ? (
|
|
<p className="text-white font-medium flex items-center justify-center gap-2">
|
|
<FileText className="w-4 h-4" /> {file.name}
|
|
</p>
|
|
) : (
|
|
<>
|
|
<p className="text-white font-medium">{t('inventory.csv.selectFile', 'Choose a CSV file or drag it here')}</p>
|
|
<p className="text-xs text-bambu-gray/70 mt-1">{t('inventory.csv.dragHint', 'Header: material (required), brand, subtype, color_name, rgba, …')}</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
<input ref={fileInputRef} type="file" accept=".csv,text/csv" className="hidden" onChange={handleFileSelect} />
|
|
|
|
{loading && (
|
|
<div className="flex items-center justify-center gap-2 text-bambu-gray py-4">
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
{t('inventory.csv.parsing', 'Reading file…')}
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="p-3 bg-red-50 dark:bg-red-500/10 border border-red-300 dark:border-red-500/30 rounded-lg flex items-start gap-3">
|
|
<XCircle className="w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 flex-shrink-0" />
|
|
<p className="text-sm text-red-700 dark:text-red-300 break-words">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{preview && (
|
|
<>
|
|
{/* Summary */}
|
|
<div className="flex flex-wrap gap-3 text-sm">
|
|
<span className="px-2 py-1 rounded bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400">
|
|
{t('inventory.csv.validCount', '{{count}} valid', { count: preview.valid_count })}
|
|
</span>
|
|
<span className="px-2 py-1 rounded bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400">
|
|
{t('inventory.csv.errorCount', '{{count}} error', { count: preview.error_count })}
|
|
</span>
|
|
<span className="px-2 py-1 rounded bg-bambu-dark text-bambu-gray">
|
|
{t('inventory.csv.skippedCount', '{{count}} skipped', { count: preview.skipped_count })}
|
|
</span>
|
|
</div>
|
|
|
|
{preview.warnings.length > 0 && (
|
|
<div className="p-3 bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-300 dark:border-yellow-500/30 rounded-lg space-y-1">
|
|
{preview.warnings.map((w, i) => (
|
|
<p key={i} className="text-xs text-yellow-700 dark:text-yellow-300">{w}</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Preview table */}
|
|
{preview.rows.length > 0 && (
|
|
<div className="border border-bambu-dark-tertiary rounded-lg overflow-hidden">
|
|
<div className="max-h-72 overflow-y-auto">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-bambu-dark sticky top-0">
|
|
<tr className="text-left text-bambu-gray">
|
|
<th className="px-3 py-2 font-medium">{t('inventory.csv.colRow', 'Row')}</th>
|
|
<th className="px-3 py-2 font-medium">{t('inventory.csv.colStatus', 'Status')}</th>
|
|
<th className="px-3 py-2 font-medium">{t('inventory.material', 'Material')}</th>
|
|
<th className="px-3 py-2 font-medium">{t('inventory.brand', 'Brand')}</th>
|
|
<th className="px-3 py-2 font-medium">{t('inventory.csv.colColor', 'Color')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{preview.rows.map((row) => (
|
|
<tr key={row.row_number} className="border-t border-bambu-dark-tertiary">
|
|
<td className="px-3 py-2 text-bambu-gray">{row.row_number}</td>
|
|
<td className="px-3 py-2">
|
|
<div className="flex items-center gap-1.5">
|
|
{statusIcon(row.status)}
|
|
{row.status === 'error' && row.reason && (
|
|
<span className="text-xs text-red-700 dark:text-red-400 break-words">{row.reason}</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-2 text-white">{row.material || '—'}</td>
|
|
<td className="px-3 py-2 text-white">{row.brand || '—'}</td>
|
|
<td className="px-3 py-2">
|
|
<div className="flex items-center gap-2">
|
|
{row.rgba && (
|
|
<span
|
|
className="inline-block w-4 h-4 rounded-full border border-bambu-dark-tertiary flex-shrink-0"
|
|
style={getSwatchStyle(row.rgba)}
|
|
/>
|
|
)}
|
|
<span className="text-white">{row.color_name || '—'}</span>
|
|
{row.resolved_color && !row.cross_material_color && (
|
|
<span title={t('inventory.csv.colorResolved', 'Color filled from catalog')}>
|
|
<Wand2 className="w-3.5 h-3.5 text-bambu-green flex-shrink-0" />
|
|
</span>
|
|
)}
|
|
{row.cross_material_color && (
|
|
<span title={t('inventory.csv.colorCrossMaterial', 'Color taken from a different material — no exact match in catalog')}>
|
|
<AlertTriangle className="w-3.5 h-3.5 text-yellow-500 flex-shrink-0" />
|
|
</span>
|
|
)}
|
|
{row.duplicate_of_existing && (
|
|
<span title={t('inventory.csv.duplicateExisting', 'A spool with this material, brand and color already exists — it will still be imported as a new spool')}>
|
|
<Copy className="w-3.5 h-3.5 text-amber-600 dark:text-amber-400 flex-shrink-0" />
|
|
</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-bambu-dark-tertiary flex justify-end gap-2">
|
|
<Button variant="secondary" onClick={onClose} disabled={importing}>
|
|
{t('common.cancel')}
|
|
</Button>
|
|
<Button onClick={handleImport} disabled={!preview || validCount === 0 || importing}>
|
|
{importing ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
{t('inventory.csv.importing', 'Importing…')}
|
|
</>
|
|
) : validCount > 0 ? (
|
|
t('inventory.csv.importValidRows', 'Import {{count}} valid rows', { count: validCount })
|
|
) : (
|
|
t('inventory.csv.noValidRows', 'No valid rows')
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|