74 lines
4.2 KiB
TypeScript
74 lines
4.2 KiB
TypeScript
import ProjectLayout from '../../Layouts/ProjectLayout';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
|
|
import { Badge } from '@/Components/ui/badge';
|
|
import { Package } from 'lucide-react';
|
|
|
|
export default function Materials({ project, availableMaterials }: any) {
|
|
return (
|
|
<ProjectLayout project={project} currentTab="materials">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Package className="h-5 w-5 text-gray-500" /> Project Materials
|
|
</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Material</TableHead>
|
|
<TableHead>Category</TableHead>
|
|
<TableHead>Unit</TableHead>
|
|
<TableHead className="text-right">Available</TableHead>
|
|
<TableHead className="text-right">On Hand</TableHead>
|
|
<TableHead className="text-right">Allocated</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{availableMaterials?.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="text-center text-gray-500 py-8">
|
|
No materials available on-site. Dispatch materials from a warehouse to use them in tasks.
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
availableMaterials?.map((m: any) => (
|
|
<TableRow key={m.id}>
|
|
<TableCell className="font-medium">
|
|
{m.name}
|
|
{m.sku && <div className="text-xs text-gray-400">{m.sku}</div>}
|
|
{m.type === 'kit' && m.components && m.components.length > 0 && (
|
|
<div className="text-xs text-gray-500 mt-1 space-y-0.5 border-l-2 border-emerald-300 pl-2 ml-1">
|
|
{m.components.map((comp: any) => (
|
|
<div key={comp.id}>{comp.quantity}x {comp.component?.name}</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
{m.category ? <Badge variant="outline">{m.category}</Badge> : <span className="text-gray-400">—</span>}
|
|
</TableCell>
|
|
<TableCell className="text-gray-500 text-sm">{m.unit}</TableCell>
|
|
<TableCell className="text-right text-green-700 font-medium tabular-nums">
|
|
{m.available_qty}
|
|
</TableCell>
|
|
<TableCell className="text-right tabular-nums">
|
|
{m.on_hand_qty}
|
|
</TableCell>
|
|
<TableCell className="text-right text-orange-600 tabular-nums">
|
|
{m.allocated_qty}
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</ProjectLayout>
|
|
);
|
|
}
|