61 lines
2.9 KiB
TypeScript
61 lines
2.9 KiB
TypeScript
// components/RackDetails.tsx
|
|
import React from 'react';
|
|
import {StockRack, StockPosition} from '@/types';
|
|
|
|
interface RackDetailsProps {
|
|
rack: StockRack | null;
|
|
onPositionClick: (posId: number) => void;
|
|
}
|
|
|
|
export default function RackModalDetails({rack, onPositionClick}: RackDetailsProps) {
|
|
|
|
return (
|
|
<div className="overflow-auto p-4">
|
|
<div className="flex flex-col space-y-4">
|
|
{rack.shelves?.map((shelf) => (
|
|
<div key={shelf.shelf_symbol} className="flex items-start space-x-4 flex-col">
|
|
{/* Shelf label */}
|
|
<div className="font-bold">Shelf {shelf.shelf_symbol}</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)}
|
|
>
|
|
{/* Position label */}
|
|
<div className="font-semibold mb-2">Pos {position.position_symbol}</div>
|
|
|
|
{/* Sections grid */}
|
|
<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>
|
|
);
|
|
}
|