125 lines
4.9 KiB
TypeScript
125 lines
4.9 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Edit, Copy } from 'lucide-react';
|
|
import { EstoqueMaterial, useDuplicarMaterial } from '@/hooks/useEstoque';
|
|
|
|
interface EstoqueMobileViewProps {
|
|
materiais: EstoqueMaterial[];
|
|
selectedMaterials: EstoqueMaterial[];
|
|
onSelectMaterial: (material: EstoqueMaterial, isSelected: boolean) => void;
|
|
onEditMaterial: (material: EstoqueMaterial) => void;
|
|
getStatusColor: (status: string) => string;
|
|
}
|
|
|
|
export const EstoqueMobileView: React.FC<EstoqueMobileViewProps> = ({
|
|
materiais,
|
|
selectedMaterials,
|
|
onSelectMaterial,
|
|
onEditMaterial,
|
|
getStatusColor
|
|
}) => {
|
|
const duplicarMaterial = useDuplicarMaterial();
|
|
|
|
const handleDuplicarMaterial = (material: EstoqueMaterial) => {
|
|
duplicarMaterial.mutate(material);
|
|
};
|
|
|
|
return (
|
|
<div className="sm:hidden space-y-4">
|
|
{materiais.map((material) => {
|
|
const pesoTotal = (material.quantidade_total || 0) * (material.peso_unitario || 0);
|
|
|
|
return (
|
|
<Card key={material.id} className="relative">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="checkbox"
|
|
className="w-4 h-4"
|
|
checked={selectedMaterials.some(m => m.id === material.id)}
|
|
onChange={(e) => onSelectMaterial(material, e.target.checked)}
|
|
/>
|
|
<div className="flex-1">
|
|
<h3 className="font-medium text-sm text-foreground leading-tight">
|
|
{material.descricao}
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Código: {material.codigo}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 ml-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onEditMaterial(material)}
|
|
className="h-7 w-7 p-1"
|
|
title="Editar material"
|
|
>
|
|
<Edit className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleDuplicarMaterial(material)}
|
|
className="h-7 w-7 p-1 text-blue-600 hover:text-blue-700"
|
|
title="Duplicar material"
|
|
disabled={duplicarMaterial.isPending}
|
|
>
|
|
<Copy className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 text-xs">
|
|
<div>
|
|
<span className="text-muted-foreground">Lote:</span>
|
|
<span className="ml-1 font-medium">{material.lote_atual || '-'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Tipo:</span>
|
|
<span className="ml-1 font-medium">{material.tipos_materia_prima?.nome || '-'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Unidade:</span>
|
|
<span className="ml-1 font-medium">{material.unidade}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Comprimento:</span>
|
|
<span className="ml-1 font-medium">{material.comprimento || '-'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Qtd Total:</span>
|
|
<span className="ml-1 font-medium">{material.quantidade_total}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Peso Total:</span>
|
|
<span className="ml-1 font-medium text-blue-600">{pesoTotal.toFixed(1)}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Disponível:</span>
|
|
<span className="ml-1 font-medium text-green-600">{material.quantidade_disponivel}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Empenhada:</span>
|
|
<span className="ml-1 font-medium text-orange-600">{material.quantidade_empenhada}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center mt-3">
|
|
<Badge variant="outline" className={`${getStatusColor(material.status)} text-xs`}>
|
|
{material.status}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|