96 lines
4.5 KiB
TypeScript
96 lines
4.5 KiB
TypeScript
import React from 'react';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faTrash, faPlus } from '@fortawesome/free-solid-svg-icons';
|
|
import { StockRack, StockPosition } from '@/types';
|
|
|
|
interface RackDetailsProps {
|
|
rack: StockRack | null;
|
|
onPositionClick: (posId: number) => void;
|
|
onAddShelf: (rackId: number) => void;
|
|
onDeleteShelf: (shelfId: number) => void;
|
|
}
|
|
|
|
export default function RackModalDetails({
|
|
rack,
|
|
onPositionClick,
|
|
onAddShelf,
|
|
onDeleteShelf
|
|
}: RackDetailsProps) {
|
|
if (!rack) return null;
|
|
|
|
return (
|
|
<div className="overflow-auto p-4">
|
|
{/* Add shelf button */}
|
|
<div className="flex justify-end mb-2">
|
|
<button
|
|
className="btn btn-sm btn-outline flex items-center space-x-1"
|
|
onClick={() => onAddShelf(rack.rack_id)}
|
|
>
|
|
<FontAwesomeIcon icon={faPlus} />
|
|
<span>Add Shelf</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-4">
|
|
{rack.shelves?.map((shelf) => (
|
|
<div
|
|
key={shelf.shelf_id}
|
|
className="flex flex-col space-y-2 border p-3 rounded-lg"
|
|
>
|
|
<div className="flex justify-between items-center">
|
|
<div className="font-bold">
|
|
Shelf {shelf.shelf_symbol} — {shelf.shelf_name}
|
|
</div>
|
|
<button
|
|
className="btn btn-xs btn-error p-1"
|
|
onClick={() => {
|
|
if (confirm(`Delete shelf ${shelf.shelf_symbol}?`)) {
|
|
onDeleteShelf(shelf.shelf_id);
|
|
}
|
|
}}
|
|
>
|
|
<FontAwesomeIcon icon={faTrash} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Positions container */}
|
|
<div className="flex space-x-4 border border-white dark:border-gray-700 h-max min-h-40 w-full">
|
|
{shelf.positions.length > 0 ? (
|
|
shelf.positions.map((position) => (
|
|
<div
|
|
key={position.position_symbol}
|
|
className="border rounded-lg p-3 w-full cursor-pointer"
|
|
onClick={() => onPositionClick(position.position_id)}
|
|
>
|
|
<div className="font-semibold mb-2">
|
|
Pos {position.position_symbol}
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-2">
|
|
{position.sections.map((section) => (
|
|
<div
|
|
key={section.section_symbol}
|
|
className="border rounded p-1 text-center bg-primary font-bold cursor-pointer"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onPositionClick(position.position_id);
|
|
}}
|
|
>
|
|
Sec {section.section_symbol}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="border rounded-lg p-3 w-full flex items-center justify-center">
|
|
No positions
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|