250 lines
11 KiB
TypeScript
250 lines
11 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { supabase } from '../../services/supabase';
|
|
import { Filament } from '../../types';
|
|
import { Plus, Trash2, Save, Package } from 'lucide-react';
|
|
|
|
const Filaments: React.FC = () => {
|
|
const [filaments, setFilaments] = useState<Filament[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [isAdding, setIsAdding] = useState(false);
|
|
|
|
// New Filament State
|
|
const [newFilament, setNewFilament] = useState<Partial<Filament>>({
|
|
name: '',
|
|
brand: '',
|
|
material: 'PLA',
|
|
color: '',
|
|
spoolWeightG: 1000,
|
|
priceBRL: 0,
|
|
tempNozzle: 200,
|
|
tempBed: 60
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchFilaments();
|
|
}, []);
|
|
|
|
const fetchFilaments = async () => {
|
|
try {
|
|
const { data, error } = await supabase.from('filaments').select('*');
|
|
if (error) throw error;
|
|
|
|
// Map snake_case database fields to camelCase TS interfaces
|
|
const mapped = (data || []).map((item: any) => ({
|
|
id: item.id,
|
|
name: item.name,
|
|
brand: item.brand,
|
|
material: item.material,
|
|
color: item.color,
|
|
spoolWeightG: item.spool_weight_g,
|
|
priceBRL: item.price_brl,
|
|
tempNozzle: item.temp_nozzle,
|
|
tempBed: item.temp_bed
|
|
}));
|
|
|
|
setFilaments(mapped);
|
|
} catch (error) {
|
|
console.error('Error fetching filaments:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!newFilament.name || !newFilament.priceBRL) return;
|
|
|
|
try {
|
|
const payload = {
|
|
name: newFilament.name,
|
|
brand: newFilament.brand,
|
|
material: newFilament.material,
|
|
color: newFilament.color,
|
|
spool_weight_g: newFilament.spoolWeightG,
|
|
price_brl: newFilament.priceBRL,
|
|
temp_nozzle: newFilament.tempNozzle,
|
|
temp_bed: newFilament.tempBed,
|
|
user_id: (await supabase.auth.getUser()).data.user?.id
|
|
};
|
|
|
|
const { error } = await supabase.from('filaments').insert([payload]);
|
|
if (error) throw error;
|
|
|
|
setIsAdding(false);
|
|
setNewFilament({
|
|
name: '',
|
|
brand: '',
|
|
material: 'PLA',
|
|
color: '',
|
|
spoolWeightG: 1000,
|
|
priceBRL: 0,
|
|
tempNozzle: 200,
|
|
tempBed: 60
|
|
});
|
|
fetchFilaments();
|
|
} catch (error) {
|
|
console.error('Error saving filament:', error);
|
|
alert('Error saving filament');
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm('Are you sure?')) return;
|
|
try {
|
|
const { error } = await supabase.from('filaments').delete().eq('id', id);
|
|
if (error) throw error;
|
|
fetchFilaments();
|
|
} catch (error) {
|
|
console.error('Error deleting filament:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">
|
|
Filaments Library
|
|
</h1>
|
|
<p className="text-muted-foreground mt-1">Manage your 3D printing materials.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsAdding(!isAdding)}
|
|
className="bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded-lg flex items-center gap-2 transition-all shadow-lg shadow-primary/20"
|
|
>
|
|
<Plus size={20} />
|
|
Add Filament
|
|
</button>
|
|
</div>
|
|
|
|
{isAdding && (
|
|
<div className="bg-card border border-border rounded-xl p-6 shadow-xl animate-in fade-in slide-in-from-top-4">
|
|
<h3 className="text-lg font-semibold mb-4">New Filament</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm font-medium mb-1">Name</label>
|
|
<input
|
|
className="w-full bg-background border border-border rounded-md px-3 py-2"
|
|
placeholder="e.g. PLA Basic White"
|
|
value={newFilament.name}
|
|
onChange={e => setNewFilament({ ...newFilament, name: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Brand</label>
|
|
<input
|
|
className="w-full bg-background border border-border rounded-md px-3 py-2"
|
|
placeholder="e.g. Voolt3D"
|
|
value={newFilament.brand}
|
|
onChange={e => setNewFilament({ ...newFilament, brand: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Material</label>
|
|
<select
|
|
className="w-full bg-background border border-border rounded-md px-3 py-2"
|
|
value={newFilament.material}
|
|
onChange={e => setNewFilament({ ...newFilament, material: e.target.value })}
|
|
>
|
|
<option value="PLA">PLA</option>
|
|
<option value="PETG">PETG</option>
|
|
<option value="ABS">ABS</option>
|
|
<option value="TPU">TPU</option>
|
|
<option value="ASA">ASA</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Color</label>
|
|
<input
|
|
className="w-full bg-background border border-border rounded-md px-3 py-2"
|
|
placeholder="e.g. White"
|
|
value={newFilament.color}
|
|
onChange={e => setNewFilament({ ...newFilament, color: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Weight (g)</label>
|
|
<input
|
|
type="number"
|
|
className="w-full bg-background border border-border rounded-md px-3 py-2"
|
|
value={newFilament.spoolWeightG}
|
|
onChange={e => setNewFilament({ ...newFilament, spoolWeightG: Number(e.target.value) })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Price (R$)</label>
|
|
<input
|
|
type="number"
|
|
className="w-full bg-background border border-border rounded-md px-3 py-2"
|
|
value={newFilament.priceBRL}
|
|
onChange={e => setNewFilament({ ...newFilament, priceBRL: Number(e.target.value) })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end mt-4 gap-2">
|
|
<button
|
|
onClick={() => setIsAdding(false)}
|
|
className="px-4 py-2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
|
|
>
|
|
<Save size={18} />
|
|
Save Filament
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="text-center py-10 text-muted-foreground">Loading...</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{filaments.map(filament => (
|
|
<div key={filament.id} className="bg-card border border-border rounded-xl p-4 shadow-sm hover:shadow-md transition-all relative group">
|
|
<div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button
|
|
onClick={() => handleDelete(filament.id)}
|
|
className="text-red-500 hover:text-red-400 p-1 bg-background/80 rounded-full"
|
|
>
|
|
<Trash2 size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="bg-primary/10 p-3 rounded-lg text-primary">
|
|
<Package size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold">{filament.name}</h3>
|
|
<p className="text-xs text-muted-foreground">{filament.brand} • {filament.material}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Price/Spool:</span>
|
|
<span className="font-medium">R$ {filament.priceBRL.toFixed(2)}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Weight:</span>
|
|
<span>{filament.spoolWeightG}g</span>
|
|
</div>
|
|
<div className="flex justify-between border-t border-border pt-2 mt-2">
|
|
<span className="text-muted-foreground">Cost/gram:</span>
|
|
<span className="text-green-500 font-bold">
|
|
R$ {(filament.priceBRL / filament.spoolWeightG).toFixed(4)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Filaments;
|